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

 

July 2014

S M T W T F S
  12345
6789101112
13141516171819
20212223 24 2526
2728293031  

Tags

    Recent Entries

    Recent Comments

    Search My Blog

    0 user(s) viewing

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