如何使用CSS和列表构造一个水平菜单?
到目前为止,我们能够处理垂直导航栏了—这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而,导航栏也常常被做成水平菜单紧挨在文本上方。
解决方案
图8显示的这种类型的导航栏可以用CSS样式化的列表实现。li元素必须被设置成inline(内联)显示,这样可以避免每个列表元素换行显示。
图8:水平菜单导航栏
这是产生这个显示效果的HTML和CSS代码:
<!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" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
讨论
为了产生水平导航栏,我们从创建一个和前面垂直导航栏ID一样的列表开始:
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
象我们在垂直导航栏做的一样,我们样式化#navigation容器,给它设置一些基本的字体信息。如果页面完全是CSS布局的话,这个ID可能还会包含一些确定导航栏在页面位置的样式:
#navigation {
font-size: 90%;
}
在ul元素的样式里面,我们移除掉列表在浏览器显示时的标志位和缩进:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
下面是把li元素的显示从垂直变换到水平的属性:
#navigation li {
display: inline;
}
在我们把display属性设定为inline之后,这个列表显示出来象图9一样:
图9:disply:inline的列表显示
我们剩下的工作是样式化导航栏的链接:
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
如果你想像我这样,在每个链接外面创建一个框,记得为了在文本和它的容器边缘留更多的空隙,你必须在链接左面和右边设定更多的padding,为了在导航栏各个项目间增加更多空隙,你必须增加链接左边和右边的margins。
分享到:
相关推荐
css+div+js实现简单导航栏开发;该页面简单明了,通俗易懂
HTML+css+jQuery实现导航栏效果--pc端 适合前端,下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav>li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') //...
微信小程序----导航栏透明渐变一:采用css3的opacity实现。
我能够使用CSS和列表创造有子菜单的导航栏吗?有时候我们需要超过一级的导航栏 – 可是在CSS里面用样式化的列表能够创建多级导航栏吗?
除非限制你自己只做单个页面的网站,否则你都需要导航栏。事实上,导航栏是任何网站设计中最主要的部分之一,如果希望用户很容易的在你的站点移动,导航栏的设计需要大量的思考。
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来,使用ul标签包含a。
利用HTML5+CSS3开发技术自由编写的一份导航栏特效插件,导航栏显示信息可以自定义,任意修改。
鼠标悬停导航栏,基于bootstrap和css3开发,美观简介,直接使用。
Android开发技巧——实现底部图标文字的导航栏,见文章:http://blog.csdn.net/maosidiaoxian/article/details/38864679 修订版本,点击底部导航栏时是直接切换,而不是依次滑动过去。
仿猫眼电影PC端首页开发源码,有html、css,过程中用到的图片时随机拿的,如果有需要的朋友可以之后自己下载编辑,
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发... 导航栏 光标
老规矩先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述... 导航栏 光标小下划线跟随 <li>PURE CSS<
一步步教大家编写酷炫的导航栏js+css实现.docx
用css3开发的导航示例,不到5k就能实现,200多行代码.
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变,但是需要注意的是不兼容IE8及以下的IE浏览器,原因:由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值!
HTML结构设计:详细介绍如何构建网页的HTML结构,包括各种必需的标签和元素,如导航栏、播放列表、音乐控制条等。 CSS样式应用:解释如何使用CSS来美化页面,包括布局、颜色方案、字体样式和响应式设计技术,确保...
这是一款基于jQuery+CSS3实现的鼠标悬停展开导航菜单,鼠标移到图标展开手风琴菜单代码。
一段Js代码根据一天中的时间将移动Chrome导航栏颜色更改为天空颜色
MAC风格的水平导航条(DIV+CSS)! 很值得下载看看!资源免费,大家分享!!
这是一个使用vue加css动画制作的menu,基于其他插件改写成vue的实现方式,可以用作菜单导航栏,后期加上vue-router,稍后把详细教程写在博客里