5 Replies Latest reply on May 28, 2010 3:58 PM by Nancy OShea

    Secondary Menu or Navigation

    JMed683

      I have my site basically built using CSS in Dreamweaver CS4. I used the "Insert Navigation Bar" command to create the primary navigation bar. I have a secondary vertical navigation menu to go to less important pages. The buttons here are images that slightly change from the up state to the over state. I tried doing an Insert Nav Bar again but DW says I cannot have another Nav Bar. I have been trying to do it via a Spry Menu Bar but it appears that I cannot have a different image for each of the items. How do I go about this?

        • 1. Re: Secondary Menu or Navigation
          Nancy OShea Adobe Community Professional & MVP

          You could use a CSS styled list menu.

           

          CSS Sprite DEMO I

          http://alt-web.com/DEMOS/CSS-Sprites.shtml

           

          CSS Sprite DEMO II

          http://alt-web.com/DEMOS/CSS-Sprites-II.shtml

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Secondary Menu or Navigation
            JMed683 Level 1

            I read about sprites. That really doesn't seem to be what I need to do. This site is for a small boutique so I don't think it requires the use of a a sprite from what I have read. I have been in print for 12 years but converting to web design is challenging - not that great with the terminology yet. I see what I am trying to do all the time. A web site has a primary navigation bar and then another vertical navigation area on the side for less important of secondary links. Basically my Nav Bar links to my primary pages and I wanted my secondary nav menu to be able to link to less important pages. They are both visible on every page. The secondary Nav menu is basically 5 words over an image. I want to use them as images because they are a specific fonts. I had planned to have an up state and an over state for each one. the only change is the size of the word with it appearing that the background is transparent. I am getting more confused as I research.

            • 3. Re: Secondary Menu or Navigation
              Nancy OShea Adobe Community Professional & MVP

              I see what I am trying to do all the time.

               

              Can you show us an example?

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: Secondary Menu or Navigation
                JMed683 Level 1

                Here is a shot of the home page. The menu I am talking about is the one one the right side under the "FashionInsider" image. It will contain the 5 links - Host A Party, Events, Newsletter, Blog, and FaceBook. Some will link to pages within the site and some will like to other sites.

                 

                ALane_Website_Example.jpg

                • 5. Re: Secondary Menu or Navigation
                  Nancy OShea Adobe Community Professional & MVP

                  You don't need anything elaborate here. Just an unordered list and some links.  You could swap out the text for images.

                   

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>List Menu</title>
                  
                  <style type="text/css">
                  #rightSidebar {
                  float:right; 
                  width: 200px;
                  margin-right: 45px;
                  }
                  
                  #rightMenu ul, #rightMenu li {
                  margin:0;
                  padding:0;
                  list-style:none;
                  }
                  
                  #rightMenu li a {
                  padding-left: 10px;
                  text-decoration: none;
                  display:block;
                  width: 175px;
                  font: italic 1.5em/2em Georgia, "Times New Roman", Times, serif;
                  color: green;
                  }
                  
                  #rightMenu li a:hover,
                  #rightMenu li a:active,
                  #rightMenu li a:focus {
                  background: green; 
                  color: white;
                  </style>
                  </head>
                  <body>
                  <div id="rightSidebar">
                  <ul id="rightMenu">
                  <li><a href="#">Host A Party </a></li>
                  <li><a href="#">Events </a></li>
                  <li><a href="#">Newsletter</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">FaceBook</a></li>
                  </ul>
                  </div>
                  </body>
                  </html>
                  
                  

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb
                  http://alt-web.blogspot.com