Highlighting Menu Items using If and Loc
Posted: 01 October 2009 10:39 AM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  42
Joined  07-18-2007

I’m using the conditional If statements to change my menu buttons depending on what page you’re on, but something isn’t working.

For example, my about page looks like this:

{embed="includes/header"}

{embed
="includes/navigation" loc == "who"}

<div id="top"></div>
<
div id="content">

and my includes/navigation template looks like this:

<div id="masthead">
<
div class="menu">
<
ul>
  <
li{if "{embed:loc}" == "who"} id="who-current"{/if} id="who"><a href="http://dotcalmhelp.com/index.php/site/about/" title="About Us">Who?</a></li>
  <
li{if "{embed:loc}" == "what"} id="what-current"{/if} id="what"><a href="http://dotcalmhelp.com/index.php/site/services/" title="What We Do">What?</a></li>
  <
li{if "{embed:loc}" == "howmuch"} id="howmuch-current"{/if} id="howmuch"><a href="http://dotcalmhelp.com/index.php/site/pricing/" title="Pricing Options">How Much?</a></li>
  <
li{if "{embed:loc}" == "login"} id="login-current"{/if} id="login"><a href="http://dotcalmhelp.com/index.php/site/login/" title="Member Login">Login</a></li>
  <
li{if "{embed:loc}" == "contact"} id="contact-current"{/if} id="contact"><a href="#" title="Contact Us">Contact</a></li>
</
ul>
<
div class="clear"></div>
</
div>
</
div>

But it’s not working. Can you have two ID’s with this kind of conditional?

Profile
 
 
Posted: 01 October 2009 11:48 AM   [ Ignore ]   [ # 1 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  106
Joined  07-30-2006

@polaroidfuse No, you can’t have two id’s on an element. What you can do is multiple classes, but the syntax is class=“who who-current” with a space in between them. You can’t do class=“who” and then class=“who-current.” The CSS and HTML will only pick up the first one.

So all that to say, the syntax should be more like

class="who{if "{embed:loc}" == "who"} who-current{/if}"

I’m not sure about the double quote marks around the stuff in the if statement, though. Might have to be single.

 Signature 

Jonathan Longnecker
FortySeven Media

Profile
 
 
Posted: 01 October 2009 12:10 PM   [ Ignore ]   [ # 2 ]  
Grad Student
Avatar
Rank
Total Posts:  42
Joined  07-18-2007

Okay, I made the changes you mentioned, but it still isn’t rendering :/

{embed="includes/navigation" loc == "who"}
<ul>
  <
li class="who{if "{embed:loc}" == "who"} who-current{/if}"><a href="http://dotcalmhelp.com/index.php/site/about/" title="About Us">Who?</a></li>
  <
li class="what{if "{embed:loc}" == "what"} what-current{/if}"><a href="http://dotcalmhelp.com/index.php/site/services/" title="What We Do">What?</a></li>
  <
li class="howmuch{if "{embed:loc}" == "howmuch"} howmuch-current{/if}"><a href="http://dotcalmhelp.com/index.php/site/pricing/" title="Pricing Options">How Much?</a></li>
  <
li class="login{if "{embed:loc}" == "login"} login-current{/if}"><a href="http://dotcalmhelp.com/index.php/site/login/" title="Member Login">Login</a></li>
  <
li class="contact{if "{embed:loc}" == "contact"} contact-current{/if}"><a href="#" title="Contact Us">Contact</a></li>
</
ul>

I tried it with single quotation marks and double, neither are working.

Profile
 
 
Posted: 01 October 2009 12:19 PM   [ Ignore ]   [ # 3 ]  
Grad Student
Avatar
Rank
Total Posts:  42
Joined  07-18-2007

Do the assigned names of the pages inside the if statements need to be the same as the actual name of the page? I.e. the name of my “who” page is “about”...

Edit: That didn’t work either :(

This is how the CSS for it is set up, although I don’t think CSS is my problem because when you view the source, you can see that it’s not rendering.

#masthead .menu ul li.who a {
  
margin-top: 160px;
  
display: block;
  
text-indent: -9999px;
  
background: url(http://dotcalmhelp.com/images/who.png) no-repeat;
  
}
  
  
#masthead .menu ul li.who a:hover,
  #masthead .menu ul li.who-current {
  
margin-top: 160px;
  
display: block;
  
text-indent: -9999px;
  
background: url(http://dotcalmhelp.com/images/who.png) no-repeat;
  
background-position: 0 -32px;
  
}

I tried using

ul li.who-current a

as well but still nada.

Profile
 
 
Posted: 01 October 2009 12:29 PM   [ Ignore ]   [ # 4 ]  
Grad Student
Avatar
Rank
Total Posts:  42
Joined  07-18-2007

Totally kidding, I figured it out!

I had

{embed="includes/navigation" loc == "who"}

instead of

{embed="includes/navigation" loc="who"}

The above code renders, but it renders as

<li class="who who-current"><a href="http://dotcalmhelp.com/index.php/site/about/" title="About Us">Who?</a></li>

So the other link is still there, it’s just shoved way down. How do I correct that?

Profile
 
 
Posted: 01 October 2009 01:25 PM   [ Ignore ]   [ # 5 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  106
Joined  07-30-2006

Aha! You know I thought that embed tag looked funny.  I don’t quite follow the last post, though. The rendered code looks great to me? What other link are you talking about?

 Signature 

Jonathan Longnecker
FortySeven Media

Profile
 
 
Posted: 26 October 2009 06:50 PM   [ Ignore ]   [ # 6 ]  
Grad Student
Avatar
Rank
Total Posts:  42
Joined  07-18-2007

It was just a matter of an extra bracket in my CSS. Coding on no sleep probably isn’t the most conducive to good results :p

Profile
 
 
Posted: 13 January 2010 10:58 AM   [ Ignore ]   [ # 7 ]  
Summer Student
Total Posts:  3
Joined  11-17-2009
{embed="includes/navigation" loc="who"}

What does the loc-tag mean? And where can I find som documentation about it?

Thanks.

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1743, on December 02, 2009 03:47 PM
Total Registered Members: 120337 Total Logged-in Users: 88
Total Topics: 126464 Total Anonymous Users: 58
Total Replies: 665023 Total Guests: 489
Total Posts: 791487    
Members ( View Memberlist )