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:

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

Thread: drop up menu with style.

Thread Tools

Search Thread

drop up menu with style.

Bookmarks

Bookmarks

Posting Permissions