PDA

View Full Version : drop up menu with style.



EISD
06-06-2009, 10:42 AM
1) CODE TITLE: Mordus

2) AUTHOR NAME/NOTES: EISD

3) DESCRIPTION: This is a CSS only "drop up" menu for a bottom navigation bar. It uses some images, highly customizable.

4)Inline code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- meta tags -->
<meta http-equiv="Content-Language" content="en-us" />
<meta name="description" content="add description here" />
<meta name="keywords" content="add keyword content of page here" />
<meta name="robots" content="index" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- tittle -->
<title>001 1110</title>
<!-- style sheet -->
<style type="text/css">
html
{
overflow: auto;
}
body
{
margin: 0;
padding: 0;
background: url( '../images/background.gif' );
font-size: 70%;
font-family: verdana;
color: #DDD;
}
#container
{
position: absolute;
width: 100%;
height: 100%;
background: url( '../images/concious.gif' ) no-repeat center 40%;
}
#menubar
{
position: absolute;
width: 100%;
height: 40px;
bottom: 0px;
background: url( '../images/menu-background.gif' ) repeat-x;
letter-spacing: -1px;
z-index: 100;
}
#menuholder
{
position: absolute;
width: 100px;
height: 40px;
background: url( '../images/menu-background.gif' ) repeat-x;
bottom: 0px;
z-index: 9999;
}
ul#menu, ul#menu ul
{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu
{
position: relative;
width: 100px;
height: 40px;
background: url( '../images/menu-button.gif' ) no-repeat center;
}
ul#menu:hover
{
background: url( '../images/menu-button-hover.gif' ) no-repeat center;
}
ul#menu li
{
float: left;
width: 100px;
height: 40px;
color: #fff;
text-align: left;
}
ul#menu li a
{
text-decoration: none;
color: #b00;
}
#menu li ul
{
position: absolute;
left: 0;
top: -300px;
margin-left: -999em;
border: none;
height: 300px;
width: 230px;
background: url( '../images/menu-pop.gif' ) no-repeat center;
}
ul#menu li li
{
width: 200px;
height: auto;
border: none;
}
ul#menu li li a
{
color: #fff;
width: 50px;
padding: 30px 10px 5px 20px;
font-weight: bold;
display: block;
}
ul#menu li:hover ul, ul#menu li.over ul
{
margin-left: 0;
}
ul#menu li li a:hover
{
color: red;
cursor: hand;
}
ul#menu li.last, ul#menu li.last ul
{
border: none;
}
</style>
<!-- script links -->
</head>
<body>
<div id="container">
<!-- Other divs go here-->
<!--
▓░▓▓░▓▓░▓▓░▓▓▓▓▓▓░░▓░▓▓▓▓░░▓░░░░
▓░░░▓▓▓▓▓░░▓▓░▓░▓▓░▓▓▓▓▓▓░░░▓▓░▓
▓░░▓▓░▓░▓░░▓▓▓▓░▓░░▓░░▓▓▓▓░▓▓▓▓▓
▓░░▓▓░░▓▓░░░▓▓░▓▓░░▓▓░▓░▓░░▓▓░▓░
▓░░▓▓░▓▓▓░░▓░░░░▓░░▓░░▓░▓▓░▓▓▓▓▓
▓░░▓░░░▓▓░░▓▓░▓░▓░░░▓░░▓▓░░▓▓░▓░
▓░░░▓▓░▓▓▓░▓▓▓▓▓▓░░▓▓░░▓▓░░▓░▓▓░
▓░░▓░░░▓▓░░▓▓░▓▓▓░░░▓▓░░▓▓░▓▓▓▓▓
▓░░░▓░▓░▓░░░▓▓░░▓▓░▓░░▓▓▓▓░▓▓▓▓▓
▓░░▓▓▓░▓▓░░▓▓░▓░▓░░▓▓▓░░▓░░▓▓▓▓░
▓░░░▓░▓░▓░░░▓▓░░▓░░▓▓░▓░▓▓░▓▓▓▓▓
▓░░░▓░░░▓░░▓▓░▓░▓▓░▓▓▓▓▓▓░░░▓░░░
▓░░▓░░░░▓░░░▓░▓░▓░░▓░░▓▓▓░░▓▓░▓▓
▓░░▓░░░▓▓▓░▓▓░░░▓░░░▓░▓▓▓▓░▓▓▓▓▓
▓░░▓░▓░░▓░░▓░░░▓▓░░▓░░░░▓░░░▓░░░
▓▓░▓▓▓▓▓▓░░░▓░░░▓░░▓░▓▓▓▓░░▓▓▓▓░
▓░░░▓░▓▓▓▓░▓▓▓▓▓▓░░░▓░▓▓▓░░▓░░░░
▓▓░▓▓▓▓▓▓░░▓▓░▓▓▓░░▓░░░░▓▓░▓▓▓▓▓
▓░░░▓░░░▓░░▓░▓▓░▓░░░▓░▓▓▓░░▓░▓▓▓
▓▓░▓▓▓▓▓▓░░▓░▓▓░▓░░░▓░▓▓▓▓░▓░░░▓
-->
</div>
<div id="menubar">
<!-- Menu bar -->
</div>
<div id="menuholder">
<!-- Menu -->
<ul id="menu">
<li><a></a>
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!-- created by EISD all rights reserved -->

qyneprox
08-04-2009, 07:18 AM
at last i found this script thanls