4 Replies Latest reply on Jun 12, 2010 10:09 PM by davidhelp

    drop down menus

    iconofsin14 Level 1

      drop down menus (the type that has only a headding visiable until you mouse over and the rest appears) are common on sites these days

       

      but how do you go about making them?

        • 1. Re: drop down menus
          John Waller Adobe Community Professional & MVP

          Which version of DW are you using?

           

          Try Insert > Spry > Menu Bar

           

          Or

          http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm

           

          Or Google drop down menus.

          • 2. Re: drop down menus
            Richard_vav Level 3

            You could use the new adobe widget browser to configure the appearance of the spry menu bar 2.0 and then insert it into your site using the insert widget command in dreamweaver cs5, if you don't have dreamweaver cs5 you can save the widget files and then insert them manually into your page.

             

            You can find out more/download the adobe widget browser using this link http://labs.adobe.com/technologies/widgetbrowser/

             

            Richard

            • 3. Re: drop down menus
              davidhelp Level 1

              To see the many possibilities go here to Stu Nichols place.

              http://www.cssplay.co.uk/menus

               

              A vertical flyout menu:

              http://www.cssplay.co.uk/menus/flyout2.html

              That guy is very imaginative.

               

              Here is a css menu generator!!

              http://pixopoint.com/products/suckerfish_css/

               

              Here is a free menu generator - 60 menus to choose from - CSS Tab Designer 2

               

              Below is a very simple dropdown menu

              ---------------------------------------------------------

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
              <head>
              <title>Simple Dropdown Menu</title>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <meta http-equiv="Content-Language" content="en-us" />

               

              <style type="text/css">

               

              body {
                  background-color: #4d677e;
              }

               

              .wrapper {
                  margin-right: auto;
                  margin-left: 200px;
                  margin-top: 50px;
              }

               


              .menu ul{
                  list-style-type:none;
                  padding:0;
                  margin:0;
              }

               

              .menu li{
                  float:left;
                  position:relative;
              }

               


              .menu a {
                  display:block;
                  font-size:1.2em;
                  width:170px;
                  color:#000;
                  background:#95b1c6;
                  text-decoration:none;
                  text-align:center;
                  font-family:Georgia, "Times New Roman", Times, serif;
                  font-weight: bold;
                  padding-top: 5px;
                  padding-right: 5px;
                  padding-bottom: 5px;
                  padding-left: 5px;
              }

               

              .menu :visited { }

               

              .menu :hover{
                  color:#000;
                  background:#FFAE5E;
              }

               


              .menu ul ul {
                  visibility:hidden;
                  position:absolute;
                  width:170px;
                  height:0;
              }

               

              .menu ul li:hover ul,
              .menu ul a:hover ul{
              visibility:visible;
              }
              </style>


              </head>
              <body>

               

              <div class="wrapper">
              <div class="menu">

               

              <ul>
              <li><a href="main.html">Dropdown</a></a>

              <ul>
                  <li><a href="menu.html">Menu</a></li>
                  <li><a href="dropdown.html">Dropdown</a></li>
                  <li><a href="menu.html">Menu</a></li>
                  </ul>
              </li>

               

              <li><a href="main.html">Menu</a></a>

              <ul>
                  <li><a href="dropdown.html" title="Dropdown">Dropdown</a></li>
                  <li><a href="menu.html" title="Menu">Menu</a></li>
                  <li><a href="dropdown.html" title="Dropdown">Dropdown</a></li>
                  <li><a href="menu.html" title="Menu">Menu</a></li>
                  </ul>
              </li>
              </ul>

               

              </div>
              </div>

               


              </body>
              </html>

              • 4. Re: drop down menus
                davidhelp Level 1

                Using the FREE CSS Tab Designer. Here is 1 sample of Horizontal Buttons.

                Get the software here:  http://www.highdots.com/css-tab-designer/

                 

                 


                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

                 

                <html>
                    <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                        <title>Horizontal Buttons Sample</title>
                               
                <style type="text/css">

                 


                /* CSS Tabs */
                #navcontainer {
                    background: #f0e7d7;
                    margin: 0 auto;
                    padding: 1em 0 0 0;
                    font-family: georgia, serif;
                    text-transform: lowercase;
                }

                 

                /* to stretch the container div to contain floated list */
                #navcontainer:after {
                    content: ".";
                    display: block;
                    line-height: 1px;
                    font-size: 1px;
                    clear: both;
                }

                 

                ul#navlist {
                    list-style: none;
                    padding: 0;
                    margin: 0 auto;
                    width: 80%;
                    font-size: 0.8em;
                }

                 

                ul#navlist li {
                    display: block;
                    float: left;
                    width: 15%;
                    margin: 0;
                    padding: 0;
                }

                 

                ul#navlist li a {
                    display: block;
                    width: 100%;
                    padding: 0.5em;
                    border-width: 1px;
                    border-color: #ffe #aaab9c #ccc #fff;
                    border-style: solid;
                    color: #777;
                    text-decoration: none;
                    background: #f7f2ea;
                }

                 

                #navcontainer>ul#navlist li a { width: auto; }

                 

                ul#navlist li#active a {
                    background: #f0e7d7;
                    color: #800000;
                }

                 

                ul#navlist li a:hover, ul#navlist li#active a:hover {
                    color: #800000;
                    background: transparent;
                    border-color: #aaab9c #fff #fff #ccc;
                }

                 

                </style>
                </head>

                 

                 

                 

                    <body>

                 

                        <h4>Horizontal Buttons</h4>

                 

                        <div id="navcontainer">
                            <ul id="navlist">
                                <!-- CSS Tabs -->
                <li><a href="Home.html">Home</a></li>
                <li><a href="Products.html">Products</a></li>
                <li><a href="Services.html">Services</a></li>
                <li><a href="Support.html">Support</a></li>

                 

                <li><a href="Order.html">Order</a></li>
                <li><a href="News.html">News</a></li>
                <li id="active"><a id="current" href="About.html">About</a></li>
                <li><a href="Home.html">Home</a></li>
                <li><a href="Products.html">Products</a></li>
                <li><a href="Services.html">Services</a></li>
                <li><a href="Support.html">Support</a></li>
                <li><a href="Order.html">Order</a></li>
                <li><a href="News.html">News</a></li>

                 

                <li><a href="About.html">About</a></li>

                 

                            </ul>
                        </div>
                    </body>
                </html>