Layout: Drop-down menus

started by Checmark on Oct 18, 2004 — RSS Feed

Checmark Checmark
Posts: 4

Fairly new to this, but I love the end result. I started with some great code I found that has five drop-down menus,  but I want to change two of the five menu items to just links, with no drop-down menus. I thought I had figured out the code structure, but no matter how many ways I try to amend the code, I can't get it to work. If anyone knows of a good teaching reference on drop-down menus, I'd much appreciate a hand. Thanks.  

Stan Stan
Posts: 44

Just throw out the JavaScript and leave the rest. If you don't know which is which, copy the whole mess and paste it in here. We'll tell you what gets trashed.

Checmark Checmark
Posts: 4

#menubar
     {
     margin-top: 10px;
     margin-bottom: 20px;
     background-color: #eee9dd;
     width: 100%;
     height: 20px;
     display: block;
     position: relative;
     z-index: 10;
     background-image: url('../Graphic%20Menus/gmenu.png');
     background-repeat: repeat-x
     }

.menuendspacer
     {
     position: relative;
     display: block;
     width: 30px;
     height: 20px;
     float: left;
     }

#menubaritem1, #menubaritem2, #menubaritem3, #menubaritem4, #menubaritem5
     {
     background-color: transparent;
     position: relative;
     float: left;
     height: 23px;
     display: block;
     }
     
#menubaritem1 a, #menubaritem2 a, #menubaritem3 a, #menubaritem4 a, #menubaritem5 a
     {
     background-color: transparent;
     display: block;
     }
     
#menubaritem1 a:hover, #menubaritem2 a:hover, #menubaritem3 a:hover, #menubaritem4 a:hover, #menubaritem5 a:hover
     {
     background-color: #b6b1a8;
     display: block;
     }

#menu1
     {
     z-index: 10;
     position: absolute;
     margin-top: 20px;
     display: block;
     width: 100px;
     height: 100px;
     visibility: hidden;
     background-color: #f2f1e7;
     border-color: #fff #958774 #958774 #fff;
     border-width: 1px 1px 1px 1px;
     border-style: solid;
     }
     
.menuitem1 a
     {
     background-image: url('../Graphic%20Menus/m4bf.gif');
     background-repeat: no-repeat;
     display: block;
     position: relative;
     height: 20px
     }

     
.menuitem1 a:hover
     {
     background-image: url('../Graphic%20Menus/m4bn.gif');
     background-repeat: no-repeat
     }

     
#menu2
     {
     z-index: 10;
     background-color: transparent;
     position: absolute;
     margin-top: 20px;
     display: block;
     width: 100px;
     height: 80px;
     background-color: #f2f1e7;
     visibility: hidden;
     
     }
     
.menuitem2 a
     {
     background-image: url('../Graphic%20Menus/m4bf.gif');
     background-repeat: no-repeat;
     display: block;
     position: relative;
     height: 20px
     }

     
.menuitem2 a:hover
     {
     background-image: url('../Graphic%20Menus/m4bn.gif');
     background-repeat: no-repeat
     }

#menu3
     {
     z-index: 10;
     background-color: transparent;
     position: absolute;
     margin-top: 20px;
     display: block;
     width: 100px;
     height: 100px;
     background-color: #f2f1e7;
     visibility: hidden;
     border-color: #fff #aaa #aaa #fff;
     border-width: 1px 1px 1px 1px;
     border-style: solid;
     }
     
.menuitem3 a
     {
     background-image: url('../Graphic%20Menus/m4bf.gif');
     background-repeat: no-repeat;
     display: block;
     position: relative;
     height: 20px
     }

     
.menuitem3 a:hover
     {
     background-image: url('../Graphic%20Menus/m4bn.gif');
     background-repeat: no-repeat
     }

     
#menu4
     {
     z-index: 10;
     background-color: transparent;
     position: absolute;
     margin-top: 20px;
     display: block;
     width: 110px;
     height: 80px;
     background-color: #f2f1e7;
     visibility: hidden;
     border-color: #fff #aaa #aaa #fff;
     border-width: 1px 1px 1px 1px;
     border-style: solid;
     }
     
     
.menuitem4 a
     {
     background-image: url('../Graphic%20Menus/m4bf.gif');
     background-repeat: no-repeat;
     display: block;
     position: relative;
     height: 20px
     }

.menuitem4 a:hover
     {
     background-image: url('../Graphic%20Menus/m4bn.gif');
     background-repeat: no-repeat
     }

     
#menu5
     {
     border-left:1px solid #fff; border-right:1px solid #999; border-top:1px solid #fff; border-bottom:1px solid #999; z-index: 10;
     background-image: url('../Graphic%20Menus/girl.jpg');
     background-repeat: no-repeat;
     position: absolute;
     margin-top: 20px;
     display: block;
     width: 100px;
     height: 120px;
     visibility: hidden
     
     }
     
.menuitem5 a
     {
     background-color: transparent;
     position: relative;
     display: block;
     height: 20px;
     }
     
.menuitem5 a:hover
     {
     background-color: #fde2c6;
     }
     
     
-->
</style>
           <script type="text/javascript">
// <!--
var menus = 4;
var currentMenu = 0;
var selectedMenu = 0;
var clicked = false;
var ie = false;


if (navigator.userAgent.indexOf("MSIE"!=-1)
           {
           ie=true;
           }
     
           
function doBlur(n) // get rid of border
     {
     if (ie)
           {
           n.blur();
           }
     }

function selectMenu(m) // click on a menu header
     {
     if(clicked) // the menu is already active
           {
           clicked=false;
           selectedMenu=0;
           currentMenu=m;
           hideAll(-1)
           }
     else
           {
           clicked=true;
           selectedMenu=m;
           currentMenu=m;
           
           hideAll(m); // except m
           if(document.getElementById)
                 {
                 var themenu=document.getElementById("menu"+m);
                 themenu.style.visibility="visible";
                 }
           }
     }


function showMenu(m) // display a full menu on rollover
     {
     if(clicked)
           {
           hideAll(m);
           if(document.getElementById)
                 {
                 var themenubaritem=document.getElementById("menubaritem"+m);
                 themenubaritem.style.background="#b6b1a8";
                 var thermenu=document.getElementById("menu"+m);
                 thermenu.style.visibility="visible";
                 }
           }
           selectedMenu=0;
           currentMenu=m;
     }
     
     
function doMenuChoice(m,n) // click a menu item
     {
     selectedMenu=0;
     currentMenu=-1;
     hideAll(currentMenu);
     clicked=false;
     alert("You chose menu "+m+" item "+n);
     return false;
     }
     
     
function hideAll(e) // hide all menus except e
     {
     
           for(i=1;i<=menus;i++)
                 {
                 if(e!=i)
                       {
                       if(document.getElementById)
                             {
                             var themenubaritem=document.getElementById("menubaritem"+i);
                             themenubaritem.style.background="transparent";
                             var themenu=document.getElementById("menu"+i);
                             themenu.style.visibility="hidden";
                             }
                       }
                 }
     }
     

// -->
</script>

Joe Gillespie Joe Gillespie
Posts: 528

I really don't see the point of this! What is the actual problem?

Checmark Checmark
Posts: 4

Sorry, I'm new here and don't know the protocols. I didn't mean to get anyone upset. I was asking for a good teaching reference on drop-down menus, but was asked to paste the code instead. I was just following direction. I will look elsewhere. Thanks.

Baxter Baxter
Posts: 157

Mark, the code you posted is pretty bloated, and really more complicated than you probably need. Google for suckerfish. That should help.

You must login to reply