16 Replies Latest reply: Apr 21, 2012 1:02 PM by Nancy O. RSS

    Navbar?

    jinda55 Community Member

      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;
      }
      
      
        • 1. Re: Navbar?
          Ben Pleysier MVP

          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

          • 2. Re: Navbar?
            jinda55 Community Member

            hmm thought so.

             

            However I have created a template so how would I get around this?

             

            I don't want it possible for others to be able to edit the navbar but I still want the current colour to be shown.

            • 3. Re: Navbar?
              Ben Pleysier MVP

              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

              • 4. Re: Navbar?
                jinda55 Community Member

                Doesn't work sadly

                 

                I have a template, does this make a difference?

                 

                Also I understand step 1 & 3 but unsure if I have to add anything to the css sheet or if I just copy and paste the code all in one go before the head section?

                 

                Can you show me where to put the code in the code I have posted i.e. add the code and highlight it red please.

                • 5. Re: Navbar?
                  Nancy O. MVP

                  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/

                  • 6. Re: Navbar?
                    jinda55 Community Member

                    No thanks.

                     

                    Looks unprofessional.

                    • 7. Re: Navbar?
                      John Waller MVP

                      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.

                      • 8. Re: Navbar?
                        polar_bare Community Member

                        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

                        • 9. Re: Navbar?
                          jinda55 Community Member

                          I can't edit the body class I have a template.

                           

                           

                          Surely there must be an easier way?

                           

                          The navbar is there... it just stays on the "home" button though

                          • 10. Re: Navbar?
                            Nancy O. MVP

                            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/WScbb6b82af5544594822510a94ae8d65-7aa3a .html

                             

                             

                            Nancy O.

                            • 11. Re: Navbar?
                              jinda55 Community Member

                              I've tried this already

                               

                              are you sure it works in cs5.5?

                               

                              Try yourself, it doesn't work

                              • 12. Re: Navbar?
                                Nancy O. MVP

                                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.

                                • 13. Re: Navbar?
                                  Ben Pleysier MVP

                                  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

                                  • 14. Re: Navbar?
                                    jinda55 Community Member

                                    Thank you it helped and did indeed get what I managed. However I awarded the correct answer to Altruistic Gramps simply because he/she managed to achieve the outcome in a far easier method. Having said this I appreciate your effort as you used screenshots etc... It was just that even though I managed to get my navbar working, in design view for my template the layout changed (looked weird and different)

                                     

                                    I got a question though if you don't mind answering, do you have a website of your own for profit? Like if you do it must be amazing skills and that and also how do you multi-quote in this forum?

                                     

                                    Like reply to two people in one post?

                                    • 15. Re: Navbar?
                                      jinda55 Community Member

                                      Thanks! Works fine now

                                      • 16. Re: Navbar?
                                        Nancy O. MVP

                                        @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/