highlight the current page of a drop down menu

This is a discussion on "highlight the current page of a drop down menu" within the Web Page Design section. This forum, and the thread "highlight the current page of a drop down menu are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Feb 11th, 2008, 12:52
Oak Oak is offline
SuperMember

SuperMember
Join Date: Dec 2007
Location: London
Age: 35
Posts: 267
Thanks: 2
Thanked 0 Times in 0 Posts
highlight the current page of a drop down menu

I want to highlight the trigger/Classes nav, when on a page of it's drop down menu. I can apply this code to the rest of the list like this
HTML: Select all
<li class=&quot;current&quot;>Monday</li>
but don't know if it is possible or how to doit for this:
HTML: Select all
<li><a class=&quot;trigger&quot; href=&quot;#&quot;>Classes</a>
Here is the code for the full list.
HTML: Select all
#p7menubar li.current {
background-color:#bbda9f;
    padding: 3px 30px 5px 10px;
    border-right: 1px solid #00A592;}
HTML: Select all
<div id=&quot;menuwrapper&quot;>
<ul id=&quot;p7menubar&quot;>
<li><a href=&quot;/&quot;>Home</a></li>
<li><a class=&quot;trigger&quot; href=&quot;#&quot;>Classes</a> 
<ul>
<li><a href=&quot;Active&quot;>Monday</a></li>                           - (Active Page)
<li><a href=&quot;children.php&quot;>Tuesday Children</a></li>
<li><a href=&quot;riday.php&quot;>Friday</a></li>
<li><a href=&quot;mon-fri.php&quot;>Mon &amp; Fri</a></li>
</ul>
</li>
<li><a href=&quot;events.php&quot;>Events</a></li>
<li><a href=&quot;contact.php&quot;>Contact</a></li>
<li><a href=&quot;teacher.php&quot;>Teacher</a></li>
<li><a href=&quot;images.php&quot;>Images</a></li>
<li><a class=&quot;trigger&quot; href=&quot;#&quot;>FAQs</a>
<ul>
<li><a href=&quot;music.php&quot;>Music &amp; the Game</a></li>
<li><a href=&quot;chistory.php&quot;>History</a></li>
</ul>
</li>
<li><a href=&quot;links.php&quot;>Links</a></li>
</ul>
</li>
</ul>
<br class=&quot;clearit&quot;>
</div>
Thanks

Last edited by Oak; Feb 12th, 2008 at 09:16.
Reply With Quote

  #2 (permalink)  
Old Feb 12th, 2008, 03:05
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,608
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Send a message via Yahoo to Monie
Re: highlight the current page of a drop down menu

Just refer them as:
Code: Select all
#p7menubar li a.trigger {
    background-color:#bbda9f;
    padding: 3px 30px 5px 10px;
    border-right: 1px solid #00A592;}
</style>
All your link assigned a class "trigger" will have the CSS applied to it.
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)

Last edited by Monie; Feb 12th, 2008 at 03:14.
Reply With Quote
  #3 (permalink)  
Old Feb 12th, 2008, 03:08
Reputable Member
Join Date: Dec 2005
Location: Texas
Age: 19
Posts: 328
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to daygon Send a message via MSN to daygon Send a message via Yahoo to daygon
Re: highlight the current page of a drop down menu

try it in css...

css:
Code: Select all
.blah a:link{
background: #cbcbcb;
}

.blah a:active{
background: #006699;
}
and html:
HTML: Select all
<div class="blah"><a src="nfjfjf.php">nfjfj</a></div>
try that and see if it works out for ya
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
highlight current page unitedcraig Web Page Design 53 Feb 13th, 2008 22:20
How to highlight the current page Nav link ? Oak Web Page Design 11 Jan 20th, 2008 13:21
Showing Current Page with Flash Slider Menu samason Flash & Multimedia Forum 2 Jun 9th, 2007 15:46
need to add a drop down menu to a page rubyk9 JavaScript Forum 1 Feb 22nd, 2007 09:38
Drop down menu info displayed on same page? Dopeness JavaScript Forum 1 Jan 10th, 2006 07:34


All times are GMT. The time now is 20:47.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43