dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Highlighting Page Selected

  1. #1
    Join Date
    Oct 2012
    Posts
    2

    Highlighting Page Selected

    I have looked on so many sites and can't figure this out. On my blog: http://oligclimbing.blogspot.co.uk/ I have a selection of pages along the top, when I am on a selected page I want the writing to stay highlighted.

    The html for the menu ssection is:
    HTML Code:
    <style> /*Start Css Menu By RealcomBiz.com*/
    .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="http://oligclimbing.blogspot.co.uk/">HOME</a></li>
      <li><a href="http://oligclimbing.blogspot.co.uk/p/photos_2.html">PHOTO</a></li>
      <li><a href="http://oligclimbing.blogspot.co.uk/p/videos.html">VIDEO</a></li>
      <li><a href="http://oligclimbing.blogspot.co.uk/p/about-me.html">BIO</a>
      </li></ul></div>
    How do I do this, and if you have an answer please let me know where in the code it goes

    Cheers!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    You can't do this with CSS alone. You either need to have the blog script generate the necessary code (which you probably can't do on blogspot), or use JavaScript to compare the document.location.href to the 'href' attributes in your menu links and add an appropriate class name to the <a>nchor tag if it matches. Search on "javascript highlight current page" and you'll find some examples.

  3. #3
    Join Date
    Oct 2012
    Posts
    2
    I did a Javascript search, and added it to the html gadget on the template page:

    HTML Code:
    <style> /*Start Css Menu By RealcomBiz.com*/
    .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);
    }
    function select_nav() {
       var nav_links = document.getElementById('sidebar_content')
         .getElementsByTagName('a');
       var selected = location.pathname;
       
       for (var i = 0; i < nav_links.length; i++) {
         var link = nav_links[i].pathname;
         
         // fiddle IE's view of the link
         if (link.substring(0, 1) != '/')
           link = '/' + link;
         
         if (link == selected)
           nav_links[i].setAttribute(cattr, 'selected');
       }
     }
     
     window.onload = function() {
       select_nav();
     };
    }
    
    }
    
    /*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="http://oligclimbing.blogspot.co.uk/">HOME</a></li>
      <li><a href="http://oligclimbing.blogspot.co.uk/p/photos_2.html">PHOTO</a></li>
      <li><a href="http://oligclimbing.blogspot.co.uk/p/videos.html">VIDEO</a></li>
      <li><a href="http://oligclimbing.blogspot.co.uk/p/about-me.html">BIO</a>
      </li></ul></div>
    Nothing happened, which I admit is probably completely down to my lack of understanding.

  4. #4
    Join Date
    Oct 2012
    Posts
    47
    With online resources such as a list of useful Matic, now easier than ever to use unordered lists to create navigation. As additional assistance to users, why do not shed light on the current page in the movement? And showed a recent article on the list called, regardless of current conservation movement, and how to do it with PHP. Here is an easy solution using CSS

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles