Earlier, we found the very Sexy Drop Down Menu w/jQuery & CSS shared by Soh Tanaka, implemented multi-level Drop-Down with slight modifications, and implemented ASP. NET dynamically creates versions by outputting HTML files. If you are interested, you can encapsulate them as Server Control.
HTML section:
Copy to ClipboardReference: [www.bkjia.com] <ul class = "topmenu">
<Li> <a href = "#"> Home </a> </li>
<Li> <a href = "#"> Tutorials </a>
<Ul class = "submenu1">
<Li> <a href = "#"> latency </a> </li>
<Li> <a href = "#"> Ch2 </a>
<Ul class = "submenu11">
<Li> <a href = "#"> Ch21 </a>
<Ul class = "submenu11">
<Li> <a href = "#"> Ch211 </a>
<Ul class = "submenu11">
<Li> <a href = "#"> Ch2111 </a>
<Ul class = "submenu11">
<Li> <a href = "#"> Ch21111 </a> </li>
<Li> <a href = "#"> Ch21112 </a> </li>
<Li> <a href = "#"> Ch21113 </a> </li>
<Li> <a href = "#"> Ch21114 </a> </li>
<Li> <a href = "#"> Ch21115 </a> </li>
<Li> <a href = "#"> Ch21116 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Ch2112 </a> </li>
<Li> <a href = "#"> Ch2113 </a> </li>
<Li> <a href = "#"> Ch2114 </a> </li>
<Li> <a href = "#"> Ch2115 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Ch212 </a> </li>
<Li> <a href = "#"> Ch213 </a> </li>
<Li> <a href = "#"> Ch214 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Ch22 </a>
<Ul class = "submenu11">
<Li> <a href = "#"> Ch221 </a> </li>
<Li> <a href = "#"> Ch222 </a> </li>
<Li> <a href = "#"> Ch223 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Ch23 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Ch3 </a>
<Ul class = "submenu11">
<Li> <a href = "#"> Ch31 </a> </li>
<Li> <a href = "#"> Ch32 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
<Li> <a href = "#"> Resources </a>
<Ul class = "submenu1">
<Li> <a href = "#"> Sub Nav Link </a> </li>
<Li> <a href = "#"> Sub Nav Link </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> About Us </a> </li>
<Li> <a href = "#"> Advertise </a> </li>
<Li> <a href = "#"> Submit </a> </li>
<Li> <a href = "#"> Contact Us </a> </li>
</Ul>
CSS section:
Copy to ClipboardReference: [www.bkjia.com] <style type = "text/css">
/* Header */
Body
{
Margin: 0;
Padding: 0;
Font: 10px normal Arial, Helvetica, sans-serif;
Background: # ddd url (images/sexydropdownmenu/body_bg.gif) repeat-x;
}
. Container
{
Width: 960px;
Margin: 0 auto;
Position: relative;
}
# Header
{
Background: url (images/sexydropdownmenu/header_bg.gif) no-repeat center top;
Padding-top: 120px;
}
# Header. version
{
Color: #111;
Font-size: 40px;
Padding: 38px pixel PX 7px 0;
Text-align: right;
Display: block;
Position: absolute;
Top: 0;
Right: 0;
}
# Header. disclaimer
{
Color: #999;
Padding: 100px 0 7px 0;
Text-align: right;
Display: block;
Position: absolute;
Top: 0;
Right: 0;
}
# Header. disclaimer
{
Color: # ccc;
}
/* Sexy Drop Down Menu */
Ul. topmenu
{
List-style: none;
Padding: 0 20px;
Margin: 0;
Float: left;
Width: 920px;
Background: #222;
Font-size: 1.2em;
Background: url (images/sexydropdownmenu/topnav_bg.gif) repeat-x;
}
Ul. topmenu li
{
Float: left;
Margin: 0;
Padding: 0 15px 0 0;
Position: relative;/* -- Declare X and Y axis base for sub navigation --*/
}
Ul. topmenu li a, ul. topmenu li a. hover
{
Padding: 10px 5px;
Color: # fff;
Display: block;
Text-decoration: none;
Float: left;
}
Ul. topmenu li a. hover, ul. topmenu li a: hover
{
Background: url (images/sexydropdownmenu/topnav_hover.gif) no-repeat center top;
}
Ul. topmenu li span
{
/* -- Drop down trigger styles --*/
Width: 17px;
Height: 35px;
Float: left;
Background: url (images/sexydropdownmenu/subnav_btn.gif) no-repeat center top;
}
Ul. topmenu li span. hover
{
Background-position: center bottom;
Cursor: pointer;
}
Ul. topmenu li ul. submenu1
{
/* -- Hover effect for trigger --*/
List-style: none;
Position: absolute;/* -- Important-Keeps submenu1 from affecting main navigation flow --*/
Left: 0;
Top: 35px;
Background: #333;
Margin: 0;
Padding: 0;
Display: none;
Float: left;
Width: 170px;
Border: 1px solid #111;
}
Ul. topmenu li ul. submenu1 li
{
Margin: 0;
Padding: 0;
Border-top: 1px solid #252525;/* -- Create bevel effect --*/
Border-bottom: 1px solid #444;/* -- Create bevel effect --*/
Clear: both;
Width: 170px;
}
Ul. topmenu li ul. submenu1 li
{
Float: left;
Width: 145px;
Background: #333 url (images/sexydropdownmenu/dropdown_linkbg.gif) no-repeat 10px center;
Padding-left: 20px;
}
Ul. topmenu li ul. submenu1 li a: hover
{
/* -- Hover effect for submenu1 links --*/
Background: #222 url (images/sexydropdownmenu/dropdown_linkbg.gif) no-repeat 10px center;
}
Ul. topmenu li ul. submenu1 li ul. submenu11
{
List-style: none;
Position: absolute;/* -- Important-Keeps submenu11 from affecting main navigation flow --*/
Left: 170px;
Top:-2px;
Background: #333;
Margin: 0;
Padding: 0;
Display: none;
Float: left;
Width: 170px;
Border: 1px solid #111;
}
</Style>
Some jQuery code:
Copy to ClipboardReference: [www.bkjia.com] <script type = "text/javascript">
$ (Document). ready (function (){
// Top Menu
$ ("Ul. submenu1 "). parent (). append ("<span> </span>"); // Only shows drop down trigger when js is enabled (Adds empty span tag after ul. submenu1 *)
$ ("Ul. topmenu li span"). click (function () {// When trigger is clicked...
// Following events are applied to the submenu1 itself (moving submenu1 up and down)
$ (This). parent (). find ("ul. submenu1"). slideDown ('fast'). show (); // Drop down the submenu1 on click
$ (This). parent (). hover (function (){
}, Function (){
$ (This). parent (). find ("ul. submenu1"). slideUp ('low'); // When the mouse hovers out of the submenu1, move it back up
});
// Following events are applied to the trigger (Hover events for the trigger)
}). Hover (function (){
$ (This). addClass ("hover"); // On hover over, add class "hover"
}, Function () {// On Hover Out
$ (This). removeClass ("hover"); // On hover out, remove class "hover"
});
$ ("Ul. topmenu li ul. submenu1 li"). hover (function (){
$ (This). find ("ul. submenu11: first"). show ("slow ");
}, Function (){
$ (This). find ("ul. submenu11: first"). hide ("fast ");
});
});
</Script>
Demo: http://www.bkjia.com/a/Demo/2010/sexymenu21.html
