Js+css 精美二级导航

2024-09-05 12:20:46

字体：大中小

来源：转载

供稿：网友

js+css精美二级导航，适合想学一些基础点的、基础js知识技巧的朋友们。其实本菜单的完成不仅仅是需要基础知识，更需要的是对CSS熟悉之后的巧妙构思，菜单可能都会写，但写出好菜单就不那么容易了。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js+css精美二级导航</title><style></style></head><body><script language="javascript" type="text/javascript">	function showSubLevel(Obj){		Obj.className="hover";	}	function hideSubLevel(Obj){		Obj.className="";	}</script><div class="menu">	<ul class="inner">        <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)">mainLevel        <ul>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)">mainLevel        <ul>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)">mainLevel        <ul>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)">mainLevel        <ul>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)">mainLevel        <ul>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        </ul>        </li>            <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)">mainLevel        <ul>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        <li>subLevel</li>        </ul>        </li>	</ul></div><p>Made by Jacktomato<br />2010年10月23日<br />适合想学一些简体、基本的js朋友们</p></body></html>

上一篇：jQuery 下拉菜单，很流行的效果

下一篇：jQuery 选项卡，仿腾讯迷你首页，清爽无修饰版