CSS effect hide / show-type menu
<head>
<script>
If (! Document.getElementById)
Document.getElementById = function () (return null;)
Function initializeMenu (menuId, actuatorId) (
Var menu = document.getElementById (menuId);
Var actuator = document.getElementById (actuatorId);
If (menu == null | | actuator == null) return;
/ / If (window.opera) return; / / I'm too tired
Actuator.parentNode.style.backgroundImage = "url (/ images / plus.gif)";
Actuator.onclick = function () (
Var display = menu.style.display;
This.parentNode.style.backgroundImage =
(Display == "block")? "Url (/ images / plus.gif)": "url (/ images / minus.gif)";
Menu.style.display = (display == "block")? "None": "block";
Return false;
)
)
Window.onload = function () (
InitializeMenu ( "productsMenu", "productsActuator");
InitializeMenu ( "newPhonesMenu", "newPhonesActuator");
InitializeMenu ( "compareMenu", "compareActuator");
)
</ Script>
<style>
Body (
Font-family: verdana, helvetica, arial, sans-serif;
)
(# MainMenu
Background-color: # EEE;
Border: 1px solid # CCC;
Color: # 000;
Width: 203px;
)
(# MenuList
Margin: 0px;
Padding: 10px 0px 10px 15px;
)
Li.menubar (
Background: url (/ images / plus.gif) no-repeat 0em 0.3em;
Font-size: 12px;
Line-height: 1.5em;
List-style: none outside;
)
. Menu,. Submenu (
Display: none;
Margin-left: 15px;
Padding: 0px;
)
. Menu li,. Submenu li (
Background: url (/ images / square.gif) no-repeat 0em 0.3em;
List-style: none outside;
)
A.actuator (
Background-color: transparent;
Color: # 000;
Font-size: 12px;
Padding-left: 15px;
Text-decoration: none;
)
A.actuator: hover (
Text-decoration: underline;
)
. Menu li a,. Submenu li a (
Background-color: transparent;
Color: # 000;
Font-size: 12px;
Padding-left: 15px;
Text-decoration: none;
)
. Menu li a: hover, submenu li a: hover (
/ * Border-bottom: 1px dashed # 000 * /
Text-decoration: underline;
)
Span.key (
Text-decoration: underline;
)
</ Style>
</ Head>
<body>
<div Id="mainMenu">
<ul Id="menuList">
<li Class="menubar">
<a Href="#" id="productsActuator" class="actuator"> Phones </ a>
<ul Id="productsMenu" class="menu">
<li>
<a Href="#" id="newPhonesActuator" class="actuator"> New Phones </ a>
<ul Id="newPhonesMenu" class="submenu">
<li> <a Href="#"> 9290 </ a> </ li>
<li> <a Href="#"> 8390 </ a> </ li>
<li> <a Href="#"> 8290 </ a> </ li>
<li> <a Href="#"> 8270 </ a> </ li>
</ Ul>
</ Li>
<li>
<a Href="#" id="compareActuator" class="actuator"> Compare </ a>
<ul Id="compareMenu" class="submenu">
<li> <a Href="#"> All Phones </ a> </ li>
<li> <a Href="#"> Service Provider </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Body>
Tags: css drop-down menu, CSS effect, css menu, List Style Type
Leave a Reply