Slide-In Menu Bar I for you.

  • 1
  • Idea
  • Updated 7 years ago
Description: A cool menu bar that automatically slides open from the left edge of the screen as the surfer moves the mouse over it. Moving the mouse out will cause the bar to slide back in. Browsers other than NS 4+ and IE 4+ will simply see nothing.

Demo: Look to the left of you.



<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
font:bold 12px Verdana;
line-height:20px;
}
-->



Step 2: Finally, insert the following into the section of your page, right after the tag itself:


')
else if (ns4){
document.write('\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n\n')
document.write('')
}

var sitems=new Array()

///////////Edit below/////////////////////////////////

//siteitems[x]=["Item Text", "Optional URL associated with text"]

sitems[0]=["Site Menu", ""]
sitems[1]=["Menus And Navigation", "http://www.dynamicdrive.com/dynamicin...]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicin...]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicin...]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicin...]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicin...]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicin...]
sitems[7]=["Text Animations", "http://www.dynamicdrive.com/dynamicin...]
sitems[8]=["Browser Window", "http://www.dynamicdrive.com/dynamicin...]
sitems[9]=["User System Information", "http://www.dynamicdrive.com/dynamicin...]
sitems[10]=["Other", "http://www.dynamicdrive.com/dynamicin...]

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""

/////////////////////////////////////////////////////////

if (ie4||ns4||ns6){
for (i=0;ileftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}



I got this code from this link
http://www.dynamicdrive.com/dynamicin...
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for sharing this idea, Safi. It is always fun to look at what can be done using HTML! Have you used this on your site? How did it work for you? Please share your site with us if you have incorporated it on there - we would love to take a peek at it.