SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highlighting Page Selected

    I have been struggling with this for a while, so thought I would post, as I am a complete beginner with this kind of stuff. On my blogger blog, I have created menu bar along the top linking to 4 different pages. When I select a page I want the selected page to stay as a black font in the above menu, not light grey, to make it obvious to users which page they are on. Here is the HTML for the menu:

    HTML Code:
    <style> /*Start Css Menu*/
    .menu {
        
        border: -1px;
        margin: -1px;
        padding: -1px;
        font-family: Bebas Neue;
        font-size: 59px;
        font-weight: {font-weight:normal;}
        color: 8e8e8e;
    }
    a:active
    {
    color:FFFFFF;
    font-weight:bold;
    background: red;
    display:block;
    
    }
    
    .menu li {
        float: left;
        padding: 0px 0px 0px 0px;
    }
    
    .menu li a {
        color: #666666;
        display: block;
        font-weight: normal;
        line-height: 44px;
        padding: 10px 40px;
        text-align: left;
        text-decoration: none;
    }
    
    .menu li a:hover {
        color: #000000;
        text-decoration: none;
    }
    
    .menu li ul {
        background: #e0e0e0;
        border-left: 4px dotted #FFFFFF;
        border-right: 4px dotted #FFFFFF;
        border-bottom: 4px dotted #FFFFFF;
        display: none;
        height: auto;
        filter: alpha(opacity=0);
        opacity: 0.00;
        position: absolute;
        width: 0px;
        z-index: 200;
    /*top:0em;
    /*left:0;*/
    }
    
    .menu li:hover ul {
        display: block;
    }
    
    .menu li li {
        display: block;
        float: none;
        padding: 0px;
        width: 225px;
    }
    
    .menu li ul a {
        display: block;
        font-size: 12px;
        font-style: normal;
        padding: 0px 0px 0px 0px;
        text-align: left;
    }
    
    .menu li ul a:hover {
        background: #949494;
        color: #000000;
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
    
    }
    
    }
    
    /*End Css Menu By RealcomBiz.com*/ 
    </style>  
    
    
    <div class="menu">
     <ul>
      <li><a
    
    href=""></a
    
    href=""></li><li><a
    href=""></a
    href=""></li><li><a
    href=""></a
    href=""></li>
      <li><a href="home link">HOME</a></li>
      <li><a href="photo link">PHOTO</a></li>
      <li><a href="video link">VIDEO</a></li>
      <li><a href="bio link">BIO</a>
      </li></ul></div>
    What code, and where to use it in the above code would be great!

    Thanks in advance!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    There is really no way to do this w/o access to the blogger source code (or .js)

    CSS affects only the current document, thus as far as its concerned its always ON the current document.

    If you are able to alter your blogger template you can do one of two things.

    1) give all your nav LIs individual classes that correspond with the page the anchor they contain links to. ala:
    <li class="home"><a href='blogger.com/home.html>home</a></li>
    <li class="another"><a href='blogger.com/another.html>another</a></li>
    2) Edit the template so that it adds a class to the BODY tag concurrent with the page beign displayed .. so the output would be : <body class="home">
    3) Your CSS for this would be like this:
    .home .home, .other .other, .yetAnother .yetAnother , .etc .etc { .. style rules for your current link...; }

    OR if you are more versed with the blogger templating you could just simply have it output "class='current'" in the current link's LI then simply have that rule in your CSS : .current { .. style rules for your current link...;}

    I really cant believe blogger doesn't actually already mark its menu output with some sort fo current marker as wordpress does. so unless you have hardcoaded the HTML you gave as an example, part of hat I have said may already be being done automatically.

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply, I tried the the final idea, but I couldn't figure out how to put it into the page code, copying tutorials didn't give the same result. When I added it to the HTML/Javascript gadget the menu is assigned to all it did was changed the look of the whole thing.

    Searching around again, a few people recommended javascript, but I couldn't get that to work either.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This is a simple way to do it with JS:

    http://css-tricks.com/snippets/jquer...-current-page/

    But as D_P said, it depends on what access you have in Blogger.
    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."


Tags for this Thread

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
  •