Skip navigation
Currently Being Moderated

Navbar?

Apr 16, 2012 5:04 PM

Website link - myairtravels.cu.cc

 

As you can see on the navbar the active page in this case the home button has a orange background colour to show it is on the page (see the home button in the navbar)

 

However when I switch over to the other pages, it acts like the home button is active as the colour of the button is still orange

 

i.e. if you visit this page myairtravels.cu.cc/ContactUs.html

 

As you can see the home button is still orange.

 

How do I make it so the 'actual active page' shows the orange background colour in the navbar buttons?

 

This is the code I think that needs ammending in the html template I have created:

 

 

            <!-- horizontal navigation -->  
            <div id="nav1"> 
              <ul>
                <li id="current" style="border:none">
                <a href="../index.html" shape="rect">Home</a>
                </li>
                <li>
                <a href="../Flights.html">Flights</a>
                </li>
                <li>
                  <a href="../Hotels.html" shape="rect">Hotels</a>
                </li>
                <li>
                  <a href="../BookNow.html" shape="rect">Book Now</a>
                </li>
                <li>
                  <a href="../Login.html" shape="rect">Login</a>
                </li>
              </ul> 
            </div>  
            <!-- end horizontal navigation 

 

This is the style.css sheet

html {
          background: #d0d0d0;
          margin:0 0 0 -1px;
          padding:0; 
          overflow-Y: scroll;
}




body {
          padding:0;
          margin :0;
          display:table; 
          width:100%; 
}




body {
          color:#656565;
          font-family: 'Trebuchet MS', sans-serif;
          font-size: 13px;
          font-style: normal;
          font-weight: normal;
          text-transform: normal;
}


p {
          letter-spacing: normal;
          line-height: 1.7em;
}




h1 {
          color:#000066;
          font-size:18px;
          margin:20px 0 5px 0;
          clear:both;
}




a:link, a:visited {
          color:#2887A2;
          text-decoration:none;
}




a:hover {
          color:#003366;
          text-decoration:underline;
          text-align: left;
}


#wrapper {
          background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
          margin:0 auto ;
          width:100%;
}


body {
          background-color:#d0d0d0;
}


#wrapper {
          border-top: 1px solid #ffffff;
}



#bg {
          margin:0 auto;
          padding:0;
          background:transparent ;
          background-image:url(images/css/hat.jpg);
           background-repeat:no-repeat; 
          background-position: center top ;
}






#header {
          margin: 0 auto;
          min-height:25px;
          height: 25px;
          width: 800px;
}



#page {
          background: transparent url(images/css/page-bg.jpg ) no-repeat center top;
}







#container {
          margin:0 auto;
          width:800px;
}




#banner {
          margin: 0 auto;
          height:170px;
          width:100%;
}





#nav1 {
          height:30px;
          margin:0 auto ;
          text-align:center;
}


#nav1 ul {
          display:table;
          margin:0 auto;
          padding:0;
          list-style-type:none;
          position:relative;
          height:30px;
          text-transform:uppercase;
          font-size:11px;
          font-family:Arial,sans-serif;
}




#nav1 ul li {
          display:block;
          float:left;
          margin:0;
          padding:0;
          background:transparent url('images/css/hmenu.jpg') repeat-x top left;
          border-left:1px solid #1e5184;


}




#nav1 ul li a {
          display:block;
          float:left;
          color:#f8e833;
          text-decoration:none;
          padding:0px 50px ;
          line-height:30px;
          font-weight:bold;
}




#nav1 ul li a:hover, #nav1 li#current a {
          color:#ffffff;
          background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
}




#content {
          width:784px;
          margin:0 auto;
          min-height:800px;
}


#footerWrapper {
          margin:0 auto;
          height:150px;
          padding:0;
          background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
}




#footer {
          margin:0 auto;
          padding:0;
          width:800px;
          height:70px;
}




#footer {
          color:#FFFFFF;
          text-align:left;
}


#footer a:link, #footer a:visited {
          color:#FFFFFF;
}




#footer a:hover{
          color:#ffb508;
          text-decoration:none;
}



#right {
          width:200px;
          padding:10px 20px 20px 20px;
          float:right;
}




#center {
          width:500px;
          padding:10px 20px 20px 20px;
          float:left;
          font-family: Arial, "Trebuchet MS", Verdana;
          color: #003366;
}



#content p {
          margin-top:10px;
}





#sidebar ul.vmenu {
          list-style: none;
          text-align: left;
          margin: 7px 0px 8px 0px;
          padding: 0;
          text-decoration: none;
          border-top: 1px solid #595959;
}




#sidebar ul.vmenu li {
          list-style: none;
          padding: 4px 0 4px 0px;
          margin: 0 2px;
          border-bottom: 1px solid #595959;
          text-align: center;
}






#sidebar ul.vmenu li a {
          text-decoration: none;
          color:#2887A2;
}




#sidebar ul.vmenu li a:hover {
          color:#29A294;
          text-align: left;
}




#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.vmenu ul li { border: none; }




a img {
          border:none;
} 




.clear {
          clear: both;
          display: block;
          overflow: hidden;
          visibility: hidden;
          width: 0;
          height: 0;
}


div.scroll {
background-color:#666666
width:500px;
height:750px;
overflow-y:scroll;
}




#wrapper #bg #page #container #content #right #sidebar table tr td {
          color: #FFFFFF;
          text-align: left;
}
#wrapper #bg #page #container #content #center #welcome #ImageSlideShow .article .story .content {
          font-family: Arial, "Trebuchet MS", Verdana;
}

 
Replies
  • Currently Being Moderated
    Apr 18, 2012 6:31 PM   in reply to jinda55

    When I go to the other pages I see

    <div id="nav1">

                  <ul>

                    <li id="current" style="border:none">

                    <a href="index.html" shape="rect">Home</a>

                    </li>

                    <li>

                    <a href="Flights.html">Flights</a>

                    </li>

                    <li>

                      <a href="Hotels.html" shape="rect">Hotels</a>

                    </li>

                    <li>

                      <a href="BookNow.html" shape="rect">Book Now</a>

                    </li>

                    <li>

                      <a href="Login.html" shape="rect">Login</a>

                    </li>

                  </ul>

                </div>

    The highlighted code should be applied to the relevant link e.g. the Flights page should have the ID applied to the list and not the Home list.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 5:23 PM   in reply to jinda55

    You could Google the subject. One such a search gave me the following link http://www.456bereastreet.com/archive/200503/setting_the_current_menu_ state_with_css/. Nancy O has a page devoted to this topic, I'm sure you will find it by searching this forum. Even I have written a small Spry procedure which I'll gladly explain once again.

     

    The idea is to compare the page's URL with the links of the menu items. When a match is found, add a class called activeMenutem to the menu item.

     

    1. Add SpryDomUtils.js to the SpryAssets folder/directory

    2. Add the following to the head section of your template document

    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

    function InitPage(){

    Spry.$$('#MenuBar1 li').forEach(function(node){

        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

        if(a.href == window.location){

            Spry.Utils.addClassName(node,"activeMenuItem");

        }

    });

    }

    Spry.Utils.addLoadListener(InitPage);

    </script>

     

    <style>

    .activeMenuItem a {

        background:#a59a84 !important;

        color:#ffffff !important;

    }

    </style>

    3. Remove the ID and styling from the first menu item, <li id="current" style="border:none">

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 12:08 PM   in reply to jinda55

    I don't use Templates for navigation.  I much prefer server-side includes.  If you're new to SSIs, they're a huge time saver & well worth learning.

     

    Making A Persistent Page Indicator on Site Wide CSS Menus

    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2012 2:50 PM   in reply to jinda55

    What looks unprofessional?

     

    If you're referring to the gaudy yellow background in the example then I agree. I don't think anyone would choose that color for a real website. But you can style it however you like with CSS.

     

    The example demonstrates the principle of having an active "You Are Here" button to show visitors which page they're on and how to achieve it.

     

    That functionality is very much part of a professional website.

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Apr 19, 2012 2:11 PM   in reply to jinda55

    It looks as it is because it is a simple example. You can tweak the CSS and make it look however you want if you know how to do it.

     

    Most examples that Nancy has shown is in reference to a problem someone has had and she has provided a simple fix for them that has taken up a little, but not too much of her time.

     

    Thank you Nancy for all your examples!

     

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 9:19 AM   in reply to jinda55

    When working with DW Templates, you'll need to specify an editable tag attribute on the <body>.

    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af55445948 22510a94ae8d65-7aa3a.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 10:36 AM   in reply to jinda55

    It works in all versions of DW, although I admit you must go through some hurdles to set it up the first time.  Which is why I prefer to use server-side includes instead of DWTemplates.

     

    PART 1:

    Open your DWTemplate in code view, change <body> tag to <body class="home">

    Modify > Templates>  Make Attribute Editable.  See screenshot below.

     

    DWT-EditableTagAttribute.jpg

    When you hit OK, this is the code DW generates in your Template.

     

    <body class="@@(_document['class'])@@">

     

    Save Template.  Allow changes to populate to child pages...

     

     

    PART 2

    Open a child page in code view.

    Modify > Template Properties > Change class  where shown in the screenshot below.

     

    DWT-Editable-attributes2.jpg

    When you hit OK, the body class attribute in your code will change from "home" to "about"

     

     

    <body class="about">

     

     

    PART 3 -- repeat PART 2 on all your other child pages.

    Re-publish all child pages to remote server.

     

    That's it.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 11:17 AM   in reply to jinda55

    My apologies, the element selector should be

    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

    function InitPage(){

    Spry.$$('#nav1 li').forEach(function(node){

        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

        if(a.href == window.location){

            Spry.Utils.addClassName(node,"activeMenuItem");

        }

    });

    }

    Spry.Utils.addLoadListener(InitPage);

    </script>

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 1:02 PM   in reply to jinda55

    @Jinda,

    If you ask 3 web designers how to do something, you'll get 6 different answers.  There are no right or wrong answers, just different paths to the same end. 

     

    While I like Gramps' solution, it relies on JavaScript.  Some people have JavaScript disabled for security reasons so they'll never see menu highlighting done this way.  The method I described in my tutorial uses pure CSS but it takes more steps  initially especially since you're using DW Templates.   In the end, use whichever methods best fit your particular project goals & target audience.  

     

    how do you multi-quote in this forum?

     

    Like reply to two people in one post?

     

    @Bob,  some message..

     

    @Jim, some other message...

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points