SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Basic horizontal menu color changing

    Hi, I don't really know anything about web coding...

    With current coding the "Home" menu section is always red. I want the color of the menu section to be red on the menu that people clicked.

    I was trying to change the menu color depending on the web page. But I can't find the way to do it. Please help.

    I am attaching the files

    CSS Menu Upload.zipnav-bg.pngcolor.pngbottom-bg.png

    Code CSS:
    /* Let's import the lovely google font, please keep this line at the top of your stylesheet */
     
    @import url([url]http://fonts.googleapis.com/css?family=Capriola);[/url]
     
    /* Menu CSS */ 
     
    #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
     
    	padding: 0;
    	margin: 0;
    	line-height: 1;
    	font-family: 'Capriola', sans-serif;
     
    }
     
    #cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
     
    	content: '';
    	display: table;
     
    }
     
     
    #cssmenu:after, #cssmenu > ul:after {
     
    	clear: both;
     
    }
     
    #cssmenu {
     
    	zoom:1;
    	height: 69px;
    	background: url(images/bottom-bg.png) repeat-x center bottom;
    	border-radius: 2px;
     
    }
     
    #cssmenu ul{
     
    	background: url(images/nav-bg.png) repeat-x 0px 4px;
    	height: 69px;
     
    }
     
    #cssmenu ul li{
     
    	float: left;
    	list-style: none;
     
    }
     
    #cssmenu ul li a{
     
    	display: block;
    	height: 37px;
    	padding: 22px 30px 0;
    	margin: 4px 2px 0;
    	border-radius: 2px 2px 0 0;
    	text-decoration: none;
    	font-size: 15px;
    	color: white;
    	text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
    	font-weight: 400;
    	opacity: .9;
     
    }
     
    #cssmenu ul li:first-child a{
     
    	margin: 4px 2px 0 0;
     
    }
     
    #cssmenu ul li a:hover, #cssmenu ul li.active a{
     
    	background: url(images/color.png) center bottom;
    	display: block;
    	height: 37px;
    	margin-top: 0px;
    	padding-top: 26px;
    	color: #600000;
    	text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
    	opacity: 1;
     
    }
    Last edited by TechnoBear; Oct 7, 2012 at 09:53. Reason: Added CSS code

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Hi successfulfail,

    I've added your CSS to your post, because a lot of folk are not comfortable downloading zip files. You'll get more help if you put the code in your post. It's also a good idea to post your HTML, too, as it's pretty hard to work out what's happening without the full picture.

    If I've understood your question correctly, you want the link for the current page to be styled differently to the other links. Your CSS already has this:
    Code CSS:
    #cssmenu ul li a:hover, #cssmenu ul li.active a{
     
    	background: url(images/color.png) center bottom;
    	display: block;
    	height: 37px;
    	margin-top: 0px;
    	padding-top: 26px;
    	color: #600000;
    	text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
    	opacity: 1;
     
    }

    To use it on your site, you need to add class="active" to the relevant list item for each page. For example, your home page menu would be:
    Code HTML4Strict:
    <ul>
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="stuff.html">Other Stuff</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    and your "About Us" menu:
    Code HTML4Strict:
    <ul>
    <li><a href="index.html">Home</a></li>
    <li class="active"><a href="about.html">About Us</a></li>
    <li><a href="stuff.html">Other Stuff</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>

    Does that make sense?
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    The other way to style the link to the current page – if you aren't able to put a class/ID on the relevant <li>, maybe because you're including the menu so can't change it page-by-page – is to use 'matching pairs'.

    To do this, you give each <li> a different class name, and then you put the matching name as an ID on the body tag.

    So, for example, the menu would be
    HTML Code:
    <ul>
    <li class="home"><a href="index.html">Home</a></li>
    <li class="about"><a href="about.html">About Us</a></li>
    <li class="other"><a href="stuff.html">Other Stuff</a></li>
    <li class="contact"><a href="contact.html">Contact Us</a></li>
    </ul>
    and then on the Contact Us page, you would have
    HTML Code:
    <body id="contact">
    You then see the CSS with the matching pairs, like this:
    Code css:
    #home .home,
    #about .about,
    #other .other,
    #contact .contact {
    background: url(images/color.png) center bottom;
    etc...}

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I would go with Stevie D's method, but if it's a bit overwhelming, there is another option that's not as good but easier to implement. It uses jQuery:

    http://css-tricks.com/snippets/jquer...-current-page/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Or here is a third one (#3) plus the other two as well. http://www.visibilityinherit.com/code/current-page.php


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •