Follow Fantora on Twitter
Fantora Word of Classified Ads and Community Forum
Welcome Guest Search | Active Topics | Members | Log In | Register

Slide-In Menu Bar

Options
Astaroth
Posted: Monday, January 28, 2008 2:06:10 PM
Rank: Member
Groups: Member

Joined: 1/28/2008
Posts: 23
Points: 69
Location: Ro

Slide-In Menu Bar

Author: Dynamic Drive

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.

Step 1: Insert the following code into the <head> section of your page:
Code:
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>


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

Code:

<script language="JavaScript1.2">

/***********************************************
* Sliding Menu Bar Script- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
***********************************************/

var slidemenu_width='160px' //specify width of menu (in pixels)
var slidemenu_reveal='12px' //specify amount that menu should protrude initially
var slidemenu_top='170px'   //specify vertical offset of menu on page

var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
}

var sitems=new Array()

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

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

sitems[0]=["<big><font face='Arial'>Site Menu</font></big>", ""]
sitems[1]=["Menus And Navigation", "http://www.dynamicdrive.com/dynamicindex1/"]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicindex3/"]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicindex2/"]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicindex4/"]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicindex5/"]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicindex6/"]
sitems[7]=["Text Animations", "http://www.dynamicdrive.com/dynamicindex10/"]
sitems[8]=["Browser Window", "http://www.dynamicdrive.com/dynamicindex8/"]
sitems[9]=["User System Information", "http://www.dynamicdrive.com/dynamicindex9/"]
sitems[10]=["Other", "http://www.dynamicdrive.com/dynamicindex11/"]

//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;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2

rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1

if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}

function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
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)
}
}
</script>


Configuring the menu

To change the contents of the menu to your own, edit the sitems[] array. You may now also specify a target for the links, if you wish them to be loaded in a new window or frame.

To change the appearance of the menu, edit the style sheet in Step 1 plus the first few variables listed in script of Step 2. Here's a brief description of the editable parts within the style sheet:

border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;

The first line determines the appearance of the border that surrounds the menu (change 1.5px and green as desired). The second and third line effects the background color of the menu. The fourth line determines the font of the menu (change 12px and Verdana as desired). The last line deterines the spacing between each line of text in the menu.
ca4nul
Posted: Tuesday, January 29, 2008 4:27:48 AM
Rank: Advanced Member
Groups: Member

Joined: 11/9/2007
Posts: 559
Points: 1,008
Location: GB

Slide-In Menu Bar

thankx mate. it is really useful Claping
gecmark
Posted: Wednesday, March 03, 2010 1:34:26 AM
Rank: Member
Groups: Member

Joined: 2/22/2010
Posts: 12
Points: 36
Location: London

Slide-In Menu Bar

Thank you for sharing your information.

Web design London,Logo design London
hightech
Posted: Wednesday, March 10, 2010 10:40:46 PM
Rank: Advanced Member
Groups: Member

Joined: 9/6/2008
Posts: 226
Points: 484
Location: US

Slide-In Menu Bar

Useful information thanks for sharing.....

Test Management
Users browsing this topic
Guest

 Related
method to get control in efficient manner
web building primer
i need HTML code
how to convert .jpg to pdf
What is the full form of HTML ?
Free online tool to make flash flip book from pdf
CSS Tutorials
Destination India
is Dreamweaver worth buying?
need help in website designing
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Fantora Blog | Discount Shop UK | Discount Shop USA | Discount Shop Canada | Discount Boutique France | Discount Shop Deutschland | Discount Shop Italia | Descuento Shop España

Free Classified ads, Webmaster Forum & Technology Reviews | Fantora Free Classified Ads | Buy & Sell Electronics, Mobile phones & Accessories | fantora Forums Community | Buy & Sell DVD, Games and Consols | Free eBooks & Softwares | SEO & Affiliate Marketing Discussion | Programming Language Forum (.NET, ASP, PHP, SQL) | Free Classified Ads | General Stuff (Movies, Chat, Comics) | Free Online English Movies & Reviews | Free Online Hindi Movies & Reviews | Australia & New Zealand Immigration Forum | Europe immigration forum | Canada Immigration Forum | Ireland Immigration Forum | US Immigration Forum | United Kingdom Immigration Forum

Main Forum RSS : RSS

Powered by: YAF.NET
Copyright © AI Logica All rights reserved.
This page was generated in 0.323 seconds.