CSS横向菜单和纵向菜单两套

最新推荐文章于 2020-02-04 17:54:26 发布
最新推荐文章于 2020-02-04 17:54:26 发布
阅读量304 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wzg0319/archive/2010/03/17/1688071.html
版权

纵向菜单：

CSS页面：

@charset "utf-8
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td{margin:0;padding:0;font-weight:normal;}
body{font:12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";text-align:center;}
ul{list-style:none;}
.copyright{margin-top:50px;font-size:13px;}
#dymenu{width:500px;margin:0 auto;text-align:left;}
#dymenu .root{zoom:1;background:#000;}
#dymenu .root:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#dymenu .root li{position:relative;float:left;}
#dymenu .root a{color:#FFF;cursor:pointer;text-decoration:none;}
#dymenu .root table{border-collapse:collapse;border-spacing:0;}
#dymenu .root h3{height:25px;margin:0;padding:0 10px;background:#000;color:#FFF;font-size:12px;cursor:default;line-height:25px;}
#dymenu .root ul{display:none;}
#dymenu .root a:hover,#dymenu .root a:hover h3,#dymenu .root li:hover h3{background:#EEE;color:#000;}
#dymenu .root a:hover ul,#dymenu .root li:hover ul{display:block;position:absolute;left:0;width:100px;background:#EEE;}
#dymenu .root ul li{position:relative;float:none;border-top:1px solid #FFF;}
#dymenu .root ul a{display:block;width:100%;text-indent:10px;background:#EEE;color:#000;vertical-align:middle;}
#dymenu .root ul a:hover{background:#DDD;color:#333;}
#dymenu .root ul li h4{width:100px;background-color:#EEE;text-indent:10px;font-size:12px;}
#dymenu .root a:hover a ul,#dymenu .root li:hover li ul{display:none;position:static;background:none;}
#dymenu .root a:hover a:hover h4,#dymenu .root li:hover li:hover h4{background:#DDD;color:#333;cursor:pointer;}
#dymenu .root a:hover a:hover ul,#dymenu .root li:hover li:hover ul{display:block;position:absolute;left:100px;top:0;margin-top:-1px;_margin-top:0;background:#EEE;}
#dymenu .root ul ul li{border-left:1px solid #FFF;}
 页面代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS打造纵向下拉菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个纯css打造的纵向下拉菜单" />
<meta name="keywords" content="纯css, 下拉菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<link rel="stylesheet" type="text/css" media="all" href="skin/style2.css" />
</head>
<body>
<div id="dymenu">
<ul class="root">
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>飘雨社区</h3>
	<ul>
		<li><a href="http://www.doyoe.com/">网站重构</a></li>
		<li>
			<!--[if IE]><a href="?"><table><tr><td><![endif]-->
			<h4>语义化 »</h4>
			<ul>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
			</ul>
			<!--[if IE]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="http://www.doyoe.com/">搜索引擎优化</a></li>
		<li><a href="http://www.doyoe.com/">用户体验</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>css探索之旅</h3>
	<ul>
		<li><a href="http://blog.doyoe.com/">CSS</a></li>
		<li><a href="http://blog.doyoe.com/">XHTML</a></li>
		<li><a href="http://blog.doyoe.com/">JavaScript</a></li>
		<li><a href="http://blog.doyoe.com/">SEO</a></li>
		<li><a href="http://blog.doyoe.com/">UE</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>一级菜单</h3>
	<ul>
		<li>
			<!--[if IE]><a href="?"><table><tr><td><![endif]-->
			<h4>二级菜单 »</h4>
			<ul>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
				<li><a href="?">三级菜单</a></li>
			</ul>
			<!--[if IE]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li>
	<!--[if IE]><a href="?"><table><tr><td><![endif]-->
	<h3>一级菜单</h3>
	<ul>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>
		<li><a href="?">二级菜单</a></li>
	</ul>
	<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<p class="copyright">&copy; Copyright <a href="http://blog.doyoe.com/" title="css探索之旅 - 飘零雾雨的庄园">doyoe.com</a></p>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3500471-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
横向菜单：

 CSS代码：

@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,form,th,td{margin:0;padding:0;}
body{font:12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";text-align:center;}
.copyright{margin-top:50px;font-size:13px;}
#dymenu{width:500px;height:50px;margin:0 auto;background:#EEE;text-align:left;}
#dymenu ul{zoom:1;position:relative;list-style:none;background:#000;}
#dymenu ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#dymenu li{float:left;}
#dymenu a{color:#FFF;cursor:default;text-decoration:none;}
#dymenu table{border-collapse:collapse;border-spacing:0;}
#dymenu h3{height:25px;padding:0 10px;font-size:12px;color:#FFF;font-weight:normal;cursor:default;line-height:25px;}
#dymenu div{display:none;}
#dymenu a:hover,#dymenu a:hover h3,#dymenu li:hover h3{background:#EEE;color:#000;}
#dymenu a:hover div,#dymenu li:hover div{display:block;position:absolute;left:0;width:500px;height:25px;background:#EEE;}
#dymenu div a{display:inline;margin:0 5px;color:#000;cursor:pointer;}
#dymenu div a:hover{background:#EEE;color:#333;}

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS打造横向下拉菜单 - Powered by 飘零雾雨</title>
<meta name="description" content="这是一个纯css打造的横向下拉菜单" />
<meta name="keywords" content="纯css, 下拉菜单" />
<meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<link rel="stylesheet" type="text/css" media="all" href="skin/style.css" />
</head>
<body>
<div id="dymenu">
<ul>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>飘雨社区</h3>
	<div>
		<a href="http://www.doyoe.com/">网站重构</a>
		<a href="http://www.doyoe.com/">语义化</a>
		<a href="http://www.doyoe.com/">搜索引擎优化</a>
		<a href="http://www.doyoe.com/">用户体验</a>
	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>css探索之旅</h3>
	<div>
		<a href="http://blog.doyoe.com/">CSS</a>
		<a href="http://blog.doyoe.com/">XHTML</a>
		<a href="http://blog.doyoe.com/">JavaScript</a>
		<a href="http://blog.doyoe.com/">SEO</a>
		<a href="http://blog.doyoe.com/">UE</a>
	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>预留菜单</h3>
	<div>
		<a href="?">预留链接</a>
		<a href="?">虚位以待</a>
		<a href="?">虚位以待</a>
		<a href="?">虚位以待</a>
		<a href="?">虚位以待</a>
	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
<li>
<!--[if IE]>
<a href="?"><table><tr><td>
<![endif]-->
    <h3>预留菜单</h3>
	<div>
		<a href="?">还是预留</a>
		<a href="?">还是虚位</a>
		<a href="?">还是虚位</a>
		<a href="?">还是虚位</a>
		<a href="?">还是虚位</a>
	</div>
<!--[if IE]>
</td></tr></table></a>
<![endif]-->
</li>
</ul>
</div>
<p class="copyright">&copy; Copyright <a href="http://blog.doyoe.com/" title="css探索之旅 - 飘零雾雨的庄园">doyoe.com</a></p>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3500471-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
 

 

 

转载于:https://www.cnblogs.com/wzg0319/archive/2010/03/17/1688071.html

dayi0206
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页中常用的简单横向和纵向菜单
deron7的专栏
12-09 4857
网页中常用的横向和纵向菜单 ul,li { list-style:none; } ul { padding:0; margin:0; } .main,.hmain { background-image:url("imag
二级下拉菜单布局（纵向、横向）
Number7421的博客
04-27 2万+
一级菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下：&lt;ul class="clearfix"&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&
css---使用列表和列表属性创建纵向菜单
chen_zan_yu_的博客
05-24 2216
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用列表及css属性创建纵向菜单</title> <style type="text/css"> body{ margin: 10px; font-size:...
CSS制作简单的纵向菜单
JollyLee
12-07 3092
用CSS制作简单的纵向菜单
css属性 list-style 纵向菜单、横向菜单
如果你真的想做一件事，你一定会找到方法； 如果你不想做一件事，你一定会找到借口。
06-20 829
参考：[url=http://blog.sina.com.cn/s/blog_682dedf10100jzo8.html]ul li css 做横向菜单[/url] 菜单制作步骤： [list] [*]1，建立一个无序列表 [*]2，隐藏li的默认样式（因为看起来不是很好看，[color=red]菜单通常都不需要li默认的圆点[/color]，我们给UL定义一个样式来消除这些圆点。） ...
【练习实例】HTML+CSS制作导航栏（横向与纵向）
qq_44190995的博客
02-04 2万+
纵向导航栏 建立一个列表 <ul> <li><a href="#home" class="active">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系&...
前端开发HTML+CSS之列表 超链接（五）
qq_44790423的博客
08-06 1614
    在学习上面一部分之后我们可能就会有越来越多的问题和疑惑需要解决，比如，如果我想把一堆的同类型的在最顶上作为一横排放在导航，或者一竖排放在最左侧，我们现在的知识还不能解决这些东西，那么我们就需要好好利用列表     同时，我们现在做的只是一个简单的界面，并不能实线任何功能，那样怎么样才能实现网站的链接，实现可以点击并且点击之后可以得到我们想要的界面呢 一、列表 前面提到过列表有有序和无序，...
css 横向菜单实现代码
09-25
本教程将讲解如何使用CSS实现一个常见的横向导航菜单。 首先，我们来看HTML结构。一个典型的横向导航菜单通常基于无序列表（`<ul>`）构建，每个菜单项（链接）由列表项（`<li>`）包裹。在这个例子中，我们有四个...
微软风格的CSS横向菜单特效代码
03-20
"微软风格的CSS横向菜单特效代码" 提供了一种设计灵感，它借鉴了微软界面的简洁与直观，为网页增添了一份专业和现代感。 【CSS横向往返菜单】 1. **基础结构**：这种菜单通常基于HTML的`<ul>`和`<li>`元素构建，...
CSS横向下拉菜单特效代码
03-20
在本主题中，我们关注的是“CSS横向下拉菜单特效代码”，这是一个常见的交互设计元素，广泛应用于网站导航，使用户能够轻松访问多级菜单项。这种效果可以提升用户体验，使网站更具吸引力和易用性。 创建横向下拉...
jquery+css实现横向动感菜单
06-06
"jQuery+CSS实现横向动感菜单"就是一种常见的交互式导航设计，它利用JavaScript库jQuery的高效性能和CSS的样式控制来创建出类似Flash的平滑过渡效果，但比Flash更轻量级，兼容性更强，且更利于SEO优化。 首先，...
如何用CSS制作横向菜单?
Hello World
01-06 667
尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原 理，我想专门写一篇详细教程会对大家比较有帮助。 我们先来看一个菜单的例子，最终效果是: 首页 产品介绍 服务介绍 技术支持 立刻购买 联系我们 然后我们来详细讲解步骤 第一步：建立一个无序列表 我们先建立一个无序列表，来建立菜单的结构。代码是
纵向、横向导航菜单及二级弹出菜单
Terisadeng的博客
04-28 9538
一、纵向导航菜单及二级弹出菜单首先在body中添加一个div标签，其中包含ulli ul的标签结构存放网站菜单，效果如下：&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = ...
JQuery横向、纵向菜单显示
致力于顶级java全栈工程师
08-09 1416
在实际应用中，横向和纵向的菜单除了在CSS样式中有些不同之外，其他的JS文件和HTML文件编写没有什么区别，很容易相互转换。界面上的菜单我们通过嵌套ul和li来表示，通过css对菜单的简单样式进行控制，通过JS对菜单的动态显示效果进行设置。重点学习js文件中对菜单的显示和隐藏的样式设置。 纵向菜单设置： HTML代码：
html/css横向竖向导航栏的绘制
热门推荐
baidu_31134013的博客
11-06 4万+
导航栏编写一般都是用标签来写及列表，下面就看一下代码如何编写的吧： 【竖向导航栏】 产品 工具与镜像 客户与伙伴 帮助与支持 论坛与博客 （图为没有css修饰的运行截图） 接下来css修饰：在没有用css处理过的代码上，其样式ul,li标签的属性都是默认的值： a:去除li前的点：需要在ul的样式里添加 list-style-type
【CSS技巧】列表横向排列的另一种方法
weixin_30235225的博客
07-15 4719
列表<ul><dl>等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：设定<li>标签的display:inline，把<li>设定为内联元素来实现横向排列的效果，不需要使用float。 <!doctype html> <html> ...
JQuery-纵向菜单及横向菜单
hxy87的专栏
09-11 995
Menu.aspx代码如下:JQuery实践-菜单效果
编写横向菜单的HTML代码架构
u010235841的专栏
11-20 4916
第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 menu"> Baidu.Com Code52.Net Yahoo.Com Google.Com 第二步、编写CSS代码 1、设置公共样式 请将以下CSS代码添加到HTML文档的...标签范围中。 #menu { font:12px verdana, arial, s
DIV CSS 横向菜单栏
jy451928923的博客
07-17 167
body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; borde...
CSS和HTML实现横向菜单
最新发布
05-16
可以使用HTML和CSS来实现横向菜单。以下是一个简单的示例代码： HTML代码： ``` <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值