Menu Links - understanding ul, li & class
Posted: Wed Feb 07, 2007 4:22 am
Lots of the templates use unordered lists for their nav links. I'm still very new to PHP and CSS, so please forgive my ignorance.
I have a very non-blog site created last year - first with MS Frontpage, then carried over to s9y. I had never seen a character of html, css or php prior to that - in other words, I am fairly good at copying other's work, but not necessary well educated in any of this.
I decided I wanted some rollover buttons on this year's version of my boating event site. You can see that here: http://www.chicagoloopcruise.com/ I realize some of you think this style of graphics is a bit much, but I like it, and so does my particular audience. It's probably obvious that I am a Noob in Photoshop too, but this is the best I could come up with. I thought if I learned enough, I might turn this into a template (minus the button icons)... but it does not seem there is enough interest to warrant that.
Anyway, searching the net, I found a particular way to create animated rollovers using just css. No JS. Although slightly modified, the original code came from here: http://http://www.webcredible.co.uk/user-frien ... tons.shtml
So, now I want my buttons to appear "down" when the viewer is actually on the page selected by the button, not just when they hover on the button. I was trying to set an a.active class, but that has not worked as hoped.
I see a number of templates using unordered lists. Those templates often use code like this:
My question is this: I see the first item being assigned the class of "current" (in this example). None of the other items have this class, yet behave under this class if selected. Is this just a normal behavior of the list items? Any chance I can do this with my rollover style so that I can do something similar so that (im my example) my primary image is hidden, and background image revealed?
I am not posting my HTML nor my CSS as I am fairly sure anyone reading this knows how to view that... if this is not proper protocol, let me know.
I have a very non-blog site created last year - first with MS Frontpage, then carried over to s9y. I had never seen a character of html, css or php prior to that - in other words, I am fairly good at copying other's work, but not necessary well educated in any of this.
I decided I wanted some rollover buttons on this year's version of my boating event site. You can see that here: http://www.chicagoloopcruise.com/ I realize some of you think this style of graphics is a bit much, but I like it, and so does my particular audience. It's probably obvious that I am a Noob in Photoshop too, but this is the best I could come up with. I thought if I learned enough, I might turn this into a template (minus the button icons)... but it does not seem there is enough interest to warrant that.
Anyway, searching the net, I found a particular way to create animated rollovers using just css. No JS. Although slightly modified, the original code came from here: http://http://www.webcredible.co.uk/user-frien ... tons.shtml
So, now I want my buttons to appear "down" when the viewer is actually on the page selected by the button, not just when they hover on the button. I was trying to set an a.active class, but that has not worked as hoped.
I see a number of templates using unordered lists. Those templates often use code like this:
Code: Select all
<div id="mainmenu">
<ul>
<li><a class="current" href="{$serendipityBaseURL}">{$CONST.HOMEPAGE}</a></li>
{if $head_version < 1.1}
<!-- ****** Change navbar links here ****** -->
<li><a href="#">About</a></li>
<li><a href="#">Photos</a></li>
{else}
{foreach from=$navlinks item="navlink"}
<li><a href="{$navlink.href}" title="{$navlink.title}">{$navlink.title}</a></li>
{/foreach}
{/if}
</ul>
</div>I am not posting my HTML nor my CSS as I am fairly sure anyone reading this knows how to view that... if this is not proper protocol, let me know.