Subscribe to kiwi2's Blog        RSS Feed
-----

Dynamic Menu.

Icon Leave Comment
Ever wanted to create a menu bar with drop down navigation that disappears after a giving the user enough time to find what they want, no, well I thought it might be worth while anyway to have a go at putting a menu together that interacts with the user.
What needs to be done is first create a css menu with elements in an unordered list that float left, then add a suitiable amount of padding to each element to span your page.
The main elements along the top bar are displayed at all times, while the navigational elements are set to display none, until one of the main items are selected.
<style>
#menu { 
position:absolute;
top: 160px;
left: 20px;
} 
#menu li {
float:left;
list-style-type:none;
padding-right: 20px;
width: 100px;
background-color: black;
color:white;
} 
#menu3 { 
background-color: black;
color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menu4 { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menua { 
background-color: black;
margin: 0px;
padding: 0px;

color: white;

display:none;
} 

#menub { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menuc { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menud { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menue { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menuf { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menug { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 

#menuh { 
background-color: black;

color: white;
margin: 0px;
padding: 0px;

display:none;
} 
menu li ul li {
padding: 0px;
margin: 0px;
float:none;
display:none;
width: 80px;

} 
a {color:white;}</style>


And now the Javascript with a timer for the navigation elements.
<script>

function ti() 
{ 

obj = document.getElementById("menu3");
obj.style.display = "none";

var obj1 = document.getElementById("menu4");
obj1.style.display = "none"; 
} 


function show() 
{ 
obj = document.getElementById("menu3");
obj.style.display = "block";

var obj1 = document.getElementById("menu4");
obj1.style.display = "block"; 


setTimeout("ti();",7000);

 
} 

function ti1() 
{ 

obj = document.getElementById("menua");
obj.style.display = "none";

obj = document.getElementById("menub");
obj.style.display = "none"; 

obj = document.getElementById("menuc");
obj.style.display = "none"; 

obj = document.getElementById("menud");
obj.style.display = "none"; 

obj = document.getElementById("menue");
obj.style.display = "none"; 

obj = document.getElementById("menuf");
obj.style.display = "none"; 

obj = document.getElementById("menug");
obj.style.display = "none"; 

obj = document.getElementById("menuh");
obj.style.display = "none"; 


} 


function showy() 
{ 
obj = document.getElementById("menua");
obj.style.display = "block";

obj = document.getElementById("menub");
obj.style.display = "block"; 

obj = document.getElementById("menuc");
obj.style.display = "block"; 

obj = document.getElementById("menud");
obj.style.display = "block"; 

obj = document.getElementById("menue");
obj.style.display = "block"; 

obj = document.getElementById("menuf");
obj.style.display = "block"; 

obj = document.getElementById("menug");
obj.style.display = "block"; 

obj = document.getElementById("menuh");
obj.style.display = "block"; 
setTimeout("ti1();",7000);
} 



</script>


Now the HTML

<ul id='menu'>
<li  id='menu1'><a href='index.php'>Home</a></li>
<li  id="menu2" onmouseover="show();";>Sign in<ul>
<li id="menu3"><a href='reg.php'>Register</a></li>
<li id="menu4"><a href='login.php'>Login</li>
</ul></li>
<li id="menuz" onmouseover="showy()";>Site links
<ul>
<li id="menua"><a href='contact.php'>Contact us</a></li>
<li id="menub"><a href='about.php'>About us</a></li>
<li id="menuc"><a href='about.php'></a></li>
<li id="menud"><a href='products.php'>Products</a></li>
<li id="menue"><a href='orders.php'>Orders</a></li>
<li id="menuf"><a href='support.php'>Help..support</a></li>
<li id="menug"><a href='map.php'>Find us</a></li>
<li id="menuh"><a href='new.php'>New arrivals</a></li>
</ul>
</li>
</ul>


Hope someone finds it useful, more images next.
Demo:
http://www.adminsqli.../game/demo.html

0 Comments On This Entry

 

August 2014

S M T W T F S
     12
3456789
10111213141516
1718192021 22 23
24252627282930
31      

Tags

    Recent Entries

    Recent Comments

    Search My Blog

    0 user(s) viewing

    0 Guests
    0 member(s)
    0 anonymous member(s)