Menu Links - understanding ul, li & class

[Don Chambers]

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:

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>

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.

[d_cee]

Hi Owen

take a look at this thread http://board.s9y.org/viewtopic.php?t=8492 It should answer your query.

cheers

Dave

[Don Chambers]

Thanks d_cee. Looks like what I was after. I see that some of your templates assign an "active" class to the homepage link, but do not use this code. Do you just want the homepage link to always have it's own style, or do you not use this suggestion for another reason?

Also - my theme does not presently have a config.inc.php file. Is this something used exclusively by 1.1 templates? I have not yet upgraded to 1.1, nor can I until I finish some other housekeeping on my site.

[d_cee]

Hi Owen

I see that some of your templates assign an "active" class to the homepage link, but do not use this code

To be honest, abdussamad has only just done this work - before that I used to advise users how to do it specifically for their own sites. Abdussamads method is not site specific. The homepage 'active' or 'selected' class seems to be set in lots of templates, I just followed suit.

my theme does not presently have a config.inc.php file

Yep, this is for v1.1 upwards.

cheers

Dave

[Don Chambers]

Thanks again d_cee.

Since I am not using 1.1 links, what would this look like?

Code: Select all

{if $currpageuri==$navlink.href}

I tried {if $currpageuri=="http://www.fullpathtopage.html"} (including the double quotes) but it did not work.

EDIT - perhaps it is because all I did was create a config.inc.php file in my template directory as follows:

Code: Select all

<?php

$serendipity['smarty']->assign(array('currpage'=> "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']));
$serendipity['smarty']->assign(array('currpageuri'=> $_SERVER['REQUEST_URI']));

?>

Is that sufficient for the file, and is there anywhere I need to tell s9y to use this file?

EDIT AGAIN - I guess it is supposed to be$currpage=="http://www.fullpathtopage.html" (Not currpageuri). What, then, is the variable currpageuri for?

[d_cee]

Hi Owen

I'm afraid I can't help much with the config.inc.php. My understanding though is that it is only recognised by Serendipity v1.1 so you should upgrade to 1.1 if you want to use it.

Maybe Garvin or Yellowled have a better idea.

Dave

[Don Chambers]

The config.inc.php file appears to get executed if it exists. I still do not understand why this method has 2 variables - currpage and currpageuri. I was able to get things to work just fine using only $currpage=="http://www.fullpathtopage.html".

Anyway, it is a great way to detect the current page, and I can see how that would be implemented in a lot of the templates.

What were people using before this particular method? I know I have seen lots of templates where the current page link was highlighted or otherwise styled differently than the other links...

[d_cee]

Hi Don
In the past I've done this sort of thing

Code: Select all

<li {if $head_title=="my page name"} class="selected"{/if}><a href="http://mypage">My Page</a></li>

Dave