Js+CSS横向导航菜单

最新推荐文章于 2022-03-07 15:26:17 发布
最新推荐文章于 2022-03-07 15:26:17 发布
阅读量206 收藏
点赞数
文章标签： CSS JavaScript HTML ViewUI

效果图：
Js+CSS横向导航菜单


以下是源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<title>横向下拉菜单</title>
		<style type="text/css">
		<!--
		* {margin:0;padding:0;border:0;}
		body {
		 font-family: arial, 宋体, serif;
		 font-size:12px;
		}
		#nav {
		  height: 24px;  
		  list-style-type: none;  
		  padding-left:200px; 
		  line-height:24px;
		  overflow:hidden;
		  background:#999;
		}
		#nav a {
		 display: block; 
		 width: 80px; 
		 text-align:center;
		}
		#nav a:link  {
		 color:#EEE; 
		 text-decoration:none;
		}
		#nav a:visited  {
		 color:#EEE;
		 text-decoration:none;
		}
		#nav a:hover  {
		 color:#FFF;
		 text-decoration:none;
		 font-weight:bold;
		 background:#CCC;
		}
		#nav li {
		 float: left; 
		 width: 80px;
		}
		#nav li ul {
		 line-height: 24px;  
		 list-style-type: none;
		 text-align:left;
		 left: -999px; 
		 width: 520px; //注意,这里一定要设置宽度;
		 position: absolute;
		 background:#CCC;
		}
		#nav li ul li{
		  float: left;
		  width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float
		}
		#nav li ul a{
		 display: block; 
		 width: 65px;
		 text-align:left;
		 padding-left:15px;
		}
		#nav li ul a:link  {
		 color:#F1F1F1; 
		 text-decoration:none;
		}
		#nav li ul a:visited  {
		 color:#F1F1F1;
		 text-decoration:none;
		}

		#nav li ul a:hover  {
		 color:#FFF;
		 text-decoration:none;
		 font-weight:normal;
		 background:#C00;
		}
		#nav li:hover ul {
		 left:25%;
		}
		#nav li.sfhover ul {
		 left:25%;
		}
		#content {
		 clear: left; 
		}
		-->
		</style>

		<script type="text/javascript">
		<!--
		function menuFix() {
			var sfEls = document.getElementById("nav").getElementsByTagName("li");
		 	for (var i=0; i<sfEls.length; i++) {
			  	sfEls[i].οnmοuseοver=function() {
			  		this.className+=(this.className.length>0? " ": "") + "sfhover";
		 		}
		  		sfEls[i].onMouseDown=function() {
		  		this.className+=(this.className.length>0? " ": "") + "sfhover";
				}
			  	sfEls[i].onMouseUp=function() {
			 		this.className+=(this.className.length>0? " ": "") + "sfhover";
			  	}
			  	sfEls[i].οnmοuseοut=function() {
			  		this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
			  	}
		 	}
		}
		window.οnlοad=menuFix;
		//-->
		</script>
	</head>
	<body>
		<ul id="nav">
			<li>
				<a href="#">菜单一</a>
				<ul>
					<li>
						<a href="#">菜单11</a>
					</li>
					<li>
						<a href="#">菜单12</a>
					</li>
					<li>
						<a href="#">菜单13</a>
					</li>
					<li>
						<a href="#">菜单14</a>
					</li>
					<li>
						<a href="#">菜单15</a>
					</li>
					<li>
						<a href="#">菜单16</a>
					</li>
					<li>
						<a href="#">菜单17</a>
					</li>
					<li>
						<a href="#">菜单18</a>
					</li>
					<li>
						<a href="#">菜单19</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单二</a>
				<ul>
					<li>
						<a href="#">菜单21</a>
					</li>
					<li>
						<a href="#">菜单22</a>
					</li>
					<li>
						<a href="#">菜单23</a>
					</li>
					<li>
						<a href="#">菜单24</a>
					</li>
					<li>
						<a href="#">菜单25</a>
					</li>
					<li>
						<a href="#">菜单26</a>
					</li>
					<li>
						<a href="#">菜单27</a>
					</li>
					<li>
						<a href="#">菜单28</a>
					</li>
					<li>
						<a href="#">菜单29</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单三</a>
				<ul>
					<li>
						<a href="#">菜单31</a>
					</li>
					<li>
						<a href="#">菜单32</a>
					</li>
					<li>
						<a href="#">菜单33</a>
					</li>
					<li>
						<a href="#">菜单34</a>
					</li>
					<li>
						<a href="#">菜单35</a>
					</li>
					<li>
						<a href="#">菜单36</a>
					</li>
					<li>
						<a href="#">菜单37</a>
					</li>
					<li>
						<a href="#">菜单38</a>
					</li>
					<li>
						<a href="#">菜单39</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单四</a>
				<ul>
					<li>
						<a href="#">菜单41</a>
					</li>
					<li>
						<a href="#">菜单42</a>
					</li>
					<li>
						<a href="#">菜单43</a>
					</li>
					<li>
						<a href="#">菜单44</a>
					</li>
					<li>
						<a href="#">菜单45</a>
					</li>
					<li>
						<a href="#">菜单46</a>
					</li>
					<li>
						<a href="#">菜单47</a>
					</li>
					<li>
						<a href="#">菜单48</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单五</a>
				<ul>
					<li>
						<a href="#">菜单51</a>
					</li>
					<li>
						<a href="#">菜单51</a>
					</li>
					<li>
						<a href="#">菜单53</a>
					</li>
					<li>
						<a href="#">菜单54</a>
					</li>
					<li>
						<a href="#">菜单55</a>
					</li>
					<li>
						<a href="#">菜单56</a>
					</li>
					<li>
						<a href="#">菜单57</a>
					</li>
					<li>
						<a href="#">菜单58</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单六</a>
				<ul>
					<li>
						<a href="#">菜单61</a>
					</li>
					<li>
						<a href="#">菜单62</a>
					</li>
					<li>
						<a href="#">菜单63</a>
					</li>
					<li>
						<a href="#">菜单64</a>
					</li>
					<li>
						<a href="#">菜单65</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单七</a>
				<ul>
					<li>
						<a href="#">菜单71</a>
					</li>
					<li>
						<a href="#">菜单72</a>
					</li>
					<li>
						<a href="#">菜单73</a>
					</li>
					<li>
						<a href="#">菜单74</a>
					</li>
					<li>
						<a href="#">菜单75</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">菜单八</a>
				<ul>
					<li>
						<a href="#">菜单81</a>
					</li>
					<li>
						<a href="#">菜单82</a>
					</li>
					<li>
						<a href="#">菜单83</a>
					</li>
					<li>
						<a href="#">菜单84</a>
					</li>
					<li>
						<a href="#">菜单85</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

 

hemingwang0902
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿CmsEasy网站横向二级JS+CSS导航菜单
06-06
综上所述，“仿CmsEasy网站横向二级JS+CSS导航菜单”是一个结合了CSS样式和JavaScript交互的网页组件，它通过优雅的过渡效果和良好的交互设计，为用户提供了一种高效的导航方式。理解和掌握这种菜单的制作方法，对于...
html js实现横向菜单,JavaScript实现横版菜单栏
weixin_39653361的博客
06-17 712
本文实例为大家分享了JavaScript实现横版菜单栏的具体代码，供大家参考，具体内容如下示例代码：横版菜单栏.active{background-color: aqua;}.hide{display: none;}.menu{background-color: #667dbd;width: 300px;height: 30px;}.menu-item{border: #bd342d solid ...
JS制作横向菜单
qq_62881798的博客
03-07 734
<!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=g.
html js实现横向菜单,js实现水平滚动菜单导航
weixin_29290259的博客
06-16 1026
项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。先来看下最终效果：最终效果先看html结构:全单1全部菜2单全部3单菜单4全菜单全部5菜单全6单全6部菜单全菜7单全8单全部5菜单全6单全6部菜单全菜7单全8单全9部菜单全10单全11部单菜2单全菜12单全32部菜单说一下，末尾我给加了阴影的效果：.root:before{di...
JS横向菜单
天空守护云
01-25 824
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; *{padding:
jquery+css实现横向动感菜单
06-06
"jQuery+CSS实现横向动感菜单"就是一种常见的交互式导航设计，它利用JavaScript库jQuery的高效性能和CSS的样式控制来创建出类似Flash的平滑过渡效果，但比Flash更轻量级，兼容性更强，且更利于SEO优化。 首先，...
js+css经典横向导航栏
06-14
在“js+css经典横向导航栏”中，我们主要探讨的是如何结合JavaScript和CSS来创建一个功能丰富、视觉效果良好的横幅导航。 **CSS（层叠样式表）** 是用于控制网页外观的关键技术。在创建横向导航栏时，CSS可以用来...
jquery+css实现横向二级下拉菜单
06-06
本教程将深入探讨如何使用jQuery和CSS技术实现一个流畅且效果出色的横向二级下拉菜单。 首先，我们需要理解jQuery和CSS在创建这种菜单中的作用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及...
DIV+CSS+JS鼠标经过显示横向下级菜单
01-23
在网页设计中，"DIV+CSS+JS鼠标经过显示横向下级菜单"是一种常见的交互设计技术，用于构建用户友好的导航菜单。这个技术利用HTML的结构元素`<div>`、CSS样式来布局和美化菜单，以及JavaScript（通常使用jQuery库）来...
js实现的二级横向菜单条实例
10-23
主要介绍了js实现的二级横向菜单条,是非常美观简洁的二级导航条效果,可实现针对鼠标事件的动态响应及页面样式切换功能,简单实用,需要的朋友可以参考下
js横向竖向树状菜单
04-28
js横向菜单，竖向菜单，树状菜单效果很好，不信您下下来看看！！！使用jquery插件，使用简单！！！
菜单js特效， 仿flash（横向导航和竖向导航）
06-29
菜单js特效， 仿flash（横向导航和竖向导航菜单js特效， 仿flash（横向导航和竖向导航
js鼠标滑过显示横向二级导航菜单代码
11-20
js鼠标滑过显示横向二级导航菜单代码
纯JS横向无限级菜单
12-27
纯JS写成，支持所有浏览器，不依赖jquery，可移植性强，简单使用
js实现横向导航栏
白衣剑客的编程人生
01-27 2940
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">        JavaScript下拉菜单            * {            padding:0;             margin:0;        }        b
js横向二级导航菜单
vera_xue的专栏
04-14 2683
网页特效 js横向二级导航菜单 站长特效网 body { text-align: center; background: #FFF; font: 12px Tahoma, sans-serif; color: #000; } img { border: 0; } ul,li { list-style:
横向二级导航菜单(html+css+js)
热门推荐
LindenTao
05-16 1万+
/*基本信息*/ body { margin: 0; padding: 0; background: #FFFFFF; } /*导航*/ #navigation { font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */ heig
css导航栏横向二级菜单onmouseover
最新发布
10-26
CSS导航栏横向二级菜单onmouseover是一种常见的网页导航栏设计方式。...如果您想了解更多关于CSS导航栏横向二级菜单onmouseover的实现方法，可以参考引用中提供的自适应式三级菜单导航JS源码模板。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值