3 Replies Latest reply on Sep 18, 2008 9:19 AM by Newsgroup_User

    Need help with menu/navigation design

    Bushido Level 1
      Need to replicate the navigation at this site - http://www.leaseplan.com/internet/LPCom/LPComweb.nsf

      Please send all advice on how to achieve this look of white navigation sitting above a white container, and how the buttons become part of the body of site. Need to replicate this look and function.

      Thanks
        • 1. Re: Need help with menu/navigation design
          Level 7
          You could easily replicate that using Pop Menu Magic from Project 7
          www.projectseven.com
          That's my favorite menu system.

          --

          Walt


          "Bushido" <webforumsuser@macromedia.com> wrote in message
          news:gar5rb$t6e$1@forums.macromedia.com...
          > Need to replicate the navigation at this site -
          > http://www.leaseplan.com/internet/LPCom/LPComweb.nsf
          >
          > Please send all advice on how to achieve this look of white navigation
          > sitting
          > above a white container, and how the buttons become part of the body of
          > site.
          > Need to replicate this look and function.
          >
          > Thanks
          >


          • 2. Re: Need help with menu/navigation design
            I have to agree with Walt. Pop Menu Magic is a great plug-in to DW. If you are doing a lot of website dev, the money is worth it. They provide a library of templates, but then you can always go in and edit the CSS files to really customize the look. They also have a slick tutorial on their website for making the menu a “server side include” which makes it easy to modify one menu file and have it propagate throughout your site to all the pages.

            DM
            • 3. Re: Need help with menu/navigation design
              Level 7
              Bushido wrote:
              > Need to replicate the navigation at this site -
              > http://www.leaseplan.com/internet/LPCom/LPComweb.nsf
              >
              > Please send all advice on how to achieve this look of white navigation sitting
              > above a white container, and how the buttons become part of the body of site.
              > Need to replicate this look and function.
              >
              > Thanks
              >

              Heres a working example (code/css below) Copy and paste into Dreamweaver.


              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              " http://www.w3.org/TR/html4/loose.dtd">
              <html>
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <title>Test Navigation</title>
              <style type="text/css">
              #navigationBar {
              background-color: #ccc;
              padding: 10px 0 0 100px;
              border-bottom: 1px solid #333;
              }
              #navigationBar ul {
              margin: 0 0 -1px 0;
              padding: 0;
              }
              #navigationBar li {
              margin: 0;
              padding: 0;
              list-style: none;
              float: left;
              }
              #navigationBar a {
              font-family: arial, verdana, helvetica, sans-serif;
              font-size: 11px;
              color: #333;
              margin: 0 5px 0 0;
              padding: 3px 10px;
              text-decoration: none;
              display: block;
              font-weight: bold;
              }
              #navigationBar a:hover {
              color: #CC6600;
              }
              #navigationBar .pageMarker a {
              color: #666;
              background-color: #fff;
              border: 1px solid #666;
              border-bottom: none;
              }
              #navigationBar .pageMarker a:hover {
              color: #CC6600;
              }
              </style>
              </head>

              <body>
              <div id="navigationBar">
              <ul>
              <li class="pageMarker"><a href="home.htm">Home</a></li>
              <li><a href="about_us.htm">About Us</a></li>
              <li><a href="our_business.htm">Our Business</a></li>
              <li><a href="global_solutions.htm">Global Solutions</a></li>
              <br style="clear: both;">
              </ul></div>
              </body>
              </html>