有用jQuery的专业点的导航菜单吗？

kaukiyou 2010-04-01 04:09:56

网上搜了搜，发现用jQuery做的菜单，漂亮的，专业点的没有几个。

是我看的太少了吗，谁有不错的例子，发个链接出来吧。

ps，我发现http://www.ibm.com/us/en/的菜单很不错，虽然不是jQuery的。

...全文

477 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

kaukiyou 2010-07-28

打赏
举报

跟踪推荐

看看微软的菜单

http://www.microsoft.com/en/us/default.aspx

kaukiyou 2010-05-25

打赏
举报

最后使用.NET自带的控件了。

archko 2010-04-01

打赏
举报

CSS菜单,取自OPERA:
我作了注释,供参考.能不用JS就不用.



<meta http-equiv="content-type" content="text/html; charset=utf-8">

  <style type='text/css'>

	/*代码重点:据实践总结:CSS不像JS,其它这些菜单是早就存在的,只是在开始把它放到别的地方:margin:0 0 0 -999em;

		然后再鼠标移到上面的,设置margin-left:0px;,同理,如果是竖的菜单一样的.主菜单是用relative,它的子菜单,才

		能相对主菜单定位,子菜单用absolute,绝对定位.所以主菜单的高和子菜单的top:值就是这个高度.

		否则子菜单在鼠标放上去,会消失.*/

	/* top menu */

	#nav ul#mainmenu {list-style:none inside none;padding:0 130px 0 26px;margin:0 0 16px -14px;

		/*background: url('/bitmaps/mainmenu/all.png') no-repeat 100% 0;*/

		height:70px;min-height:70px;height:auto !important;z-index:998;position:relative;/*位置相对,子元素可以相对它.*//**/border:1px solid #990;}

	#nav ul#mainmenu li a {max-height:45px;border:0px solid #990;}/*定义菜单横条高度.*/



	/*#nav ul#mainmenu {margin:0 0 0 -14px;

		/*background: url('/bitmaps/mainmenu/all-tobg.png') no-repeat 100% 0;*

		height:65px;min-height:65px;height:auto !important;}*/



	/*定义所有的nav下的li,position:relative;这样会让其子元素相对它位移.

	如果li设置了margin,没有这个,那它的子元素可能会偏,float:left;会把所有li排成排*/

	#nav li {color:#fff;

		background:#900/* url('/bitmaps/mainmenu/all.png') -60px -20px*/;

		position:relative;margin-top:20px;float:left;list-style-image: none;/**/border:0px solid #990}

	#nav li a {display:block;line-height:45px;padding:0 15px;color:#fff;text-decoration:none;white-space:nowrap;}

	/*

		#nav li a:hover, #nav li.on ul a:hover, #nav li.on a, #nav li a:focus, #nav li a.sffocus, #products #nav .menu-products, #news #nav .menu-news, #discover #nav .menu-discover, #addons #nav .menu-addons, #developer #nav .menu-developer, #support #nav .menu-support, #about #nav .menu-about, #jobs #nav .menu-jobs, #business #nav .menu-business {background:transparent url('/bitmaps/mainmenu/menu_over2.png');text-shadow: #000 0px 1px 2px;}

	*/



	/* Top menu dropdowns 下面这个top那能合li里的子菜单ul放到鼠标位置下面.

	margin:0 0 0 -999em;如果不设置这个值,下级菜单会显示出来,而不是在鼠标划过时显示*/

	#nav li ul {

		position:absolute;z-index:999;min-width:150px;background:#222;color:#fff;opacity:0.98;

		top:45px;/*高度要和上面的菜单一样.因为它是在li内部,而a应该是不算box,所以是相对这个li外边界值.*/

		list-style:none;border-top:1px solid #555;margin:0 0 0 -999em;padding:0;background-image:none;

	}

	/*设置li:hover时出现子菜单ul.*/

	#nav li:hover ul/*, #nav li.sfhover ul*/ {margin-left:0;}

	#nav li ul li {/*这个float:none;不设置,因为子菜单的li设定了宽度,所以hover时宽度不会覆盖整个li*/

	float:none;margin:0;padding:0;white-space:pre;border-bottom:1px solid #555;background-image:none;background:transparent;height:2.3em;}

	#nav li ul a, #nav li.on ul a {

		height:auto;color:#fff;border:0px;line-height:2.3em;display:block;background-image: none;float:none;width:80%;

	}

	#nav li ul li:hover, #nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {color:#fff;background-color:#900;}

  </style>

</head>

<body id="company">

    <div id="nav">

      <ul id="mainmenu">

        <li><a href='#'>Home</a></li>

        <li class="on"><a href='#'>Products</a>

          <ul class="hide-mobile">

            <li><a href='#'>Opera browser</a></li>

            <li><a href='#'>Opera Mini</a></li>

            <li><a href='#'>Opera Link</a></li>

            <li><a href='#'>Opera Mobile</a></li>

            <li><a href='#'>Opera Devices</a></li>

            <li><a href='#'>Opera Mail</a></li>

            <li><a href='#'>Opera Dragonfly</a></li>

            <li><a href='#'>Opera Unite</a></li>

          </ul>

        </li>

        <li><a href='#'>Developer</a></li>

        <li><a href='#'>Support</a>

          <ul class="hide-mobile">

            <li><a href='#'>Get started</a></li>

            <li><a href='#'>Register Opera Mobile</a></li>

            <li><a href='#'>Knowledge base</a></li>

            <li><a href='#'>Online communities</a></li>

            <li><a href='#'>Reporting bugs</a></li>

            <li><a href='#'>Access Opera</a></li>

            <li><a href='#'>Premium support</a></li>

            <li><a href='#'>Documentation</a></li>

          </ul>

        </li>

        <li><a href='#'>Press</a>

          <ul class="hide-mobile">

            <li><a href='#'>Press releases</a></li>

            <li><a href='#'>Press resources</a></li>

            <li><a href='#'>Fast facts</a></li>

            <li><a href='#'>Opera in the news</a></li>

            <li><a href='#'>Reviewer's guide</a></li>

            <li><a href='#'>FAQ</a></li>

            <li><a href='#'>Press contacts</a></li>

          </ul>

        </li>

        <li><a href='#'>Company</a>

          <ul class="hide-mobile">

            <li><a href='#'>About Opera</a></li>

            <li><a href='#'>Investors</a></li>

            <li><a href='#'>State of the Mobile Web</a></li>

            <li><a href='#'>Opera on tour</a></li>

            <li><a href='#'>Job opportunities</a></li>

            <li><a href='#'>Vision</a></li>

            <li><a href='#'>Education</a></li>

            <li><a href='#'>Executive team</a></li>

            <li><a href='#'>History</a></li>

            <li><a href='#'>Contact</a></li>

          </ul>

        </li>

        <li><a href='#'>Business</a>

          <ul class="hide-mobile">

            <li><a href='#'>Overview</a></li>

            <li><a href='#'>Opera Advantage</a></li>

            <li><a href='#'>Solutions</a></li>

            <li><a href='#'>Customers</a></li>

            <li><a href='#'>Partners</a></li>

            <li><a href='#'>Gallery</a></li>

            <li><a href='#'>Awards</a></li>

            <li><a href='#'>Newsletter</a></li>

            <li><a href='#'>Contact us</a></li>

          </ul>

        </li>

      </ul>

    </div>

</body>