Advanced Search

Results 1 to 2 of 2

Thread: drop up menu with style.

  1. #1
    Join Date
    Jun 2009
    Location
    Suomi
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Cool drop up menu with style.

    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 -->
    Last edited by EISD; 06-06-2009 at 12:40 PM.

  2. #2
    Join Date
    Aug 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    at last i found this script thanls

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •