利用HTML制作一二级导航菜单

最新推荐文章于 2024-04-13 14:35:33 发布
最新推荐文章于 2024-04-13 14:35:33 发布
阅读量4.2k 收藏 50
点赞数 10
分类专栏： HTML5 文章标签： 导航 前端 html css 二级导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33587638/article/details/50445060
版权
可以说现在导航都是利用列表来制作的，废话少说，开始我们的二级导航制作
我们先从一级导航开始，我们在页面中建一个ul列表，id为nav。在前端css命名中导航可以说都是叫nav。接下来我们里面添加8个列表并设置超链接，我们把超链接的目标设置成空链接，代码如下：
好啦，现在我们在浏览器中预览看看

下面这段代码不理解自行度娘，不解释 
body{
	margin:0px;
	padding:0px;
}

现在我们给一级导航nav设置一下属性，设置宽为800像素，高为45像素，居中显示，没有列表符号，设置padding为0； 
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
        padding:0;
}
接下来我们给一级导航栏目的列表设置属性，列表的宽度为100像素，左浮动，字体的行高为45像素（这样在导航中就垂直居中了）；字体居中对齐，把li转换成块元素 
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}

最后我们给超链接设置css样式，因为超链接默认是有下划线，然后字体是蓝色的。现在我们把字体改成黑色，黑色的十六进制是#000000,去掉下划线 
#nav li a {
	color:#000;
	text-decoration:none;
}
完整的代码如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>


做到这里我们的一级导航就差不多了，我们浏览器预览下：



接下来我们给一级导航美化下， 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>

好啦，现在开始我们二级导航的制作，二级导航我们也是用列表来制作
代码如下：
（注意，二级导航的代码要嵌套在一级导航里面） 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <!-- 要嵌套在一级导航的li里面，不能嵌套在超链接里面 -->
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>


浏览器预览会有一点点的错位，设置padding就可以了 

#nav li ul{
	padding:0;
}



下面我们美化下二级导航。具体我们就不讲了 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
	position:relative;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li ul {
	position:absolute;
	width:100px;
	left:0px;
	top:45px;
	padding:0;
	border-bottom:1px solid #ccc;
}
#nav li ul li{
	width:98px;
	height:44px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>

定位：position
这次我们用到了两个属性：absolute（相对定位） relative（绝对定位）
position:absolute;
 left:0px;
 top:45px;

意思我们相对一级导航左边是0像素，上边是45像素。top=一级导航的高度



最后一点：鼠标滑过显示。
这个需要用到鼠标的hover

设置鼠标滑过一级导航的时候，下面的二级导航就显示，没有滑过二级导航就隐藏起来。 

#nav li ul {
        display:none;<!--鼠标没有滑过就隐藏起来-->
}
#nav li:hover ul{
	display:block;<!--鼠标滑过就显示出来-->
}
好啦，我们的二级导航就制作完成了



附上完整的代码： 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
	position:relative;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li ul {
	position:absolute;
	width:100px;
	left:0px;
	top:45px;
	padding:0;
	border-bottom:1px solid #ccc;
	display:none;
}
#nav li:hover ul{
	display:block;
}
#nav li ul li{
	width:98px;
	height:44px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>












qq_33587638
关注
  • 10
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用UL、Li+CSS属性制作无表格实用菜单导航效果
01-21
当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变换可以达到很多意想不到的导航效果。本实例效果如下图所示：   建立HTML相关结构 复制代码代码如下:<body><div id=”navigation”> <ul> <li><a>Home</a></li> <li><a>News</a></li> <li><a>Sport</a></li> <li><a>Weather</
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
css商城网站常用左侧分类下拉导航菜单代码
06-05
这是一款比较简单的利用css跟hover鼠标悬停属性来制作商城网站常用左侧分类下拉导航菜单代码。
CSS3Menu 网页导航菜单制作工具
07-13
CSS3Menu 是一款制作网页导航菜单的工具，并且导出标准的 html + css 文件。拥有漂亮的 CSS 导航菜单，是很多同学都希望的。CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单，你只需点几下鼠标，选几种颜色，完事。如果利用内置的模板那就更容易了，只需输入菜单上的文字即可。比较遗憾的是在 试用过程中，CSS3Menu 的导出功能貌似不支持 UTF-8，也就是说你需要手动修改代码，添加中文。不过对于习惯了手写 CSS 的设计同学来说小菜一碟了
鼠标移到菜单上弹出二级菜单特效
04-12
鼠标移到菜单上弹出二级菜单特效,利用timeout原来，以及 mouseout 和 mousehover 的先后原来。 只是一个简单 demo，未做其他处理。
HTML简单实现二级菜单栏（看了基本会）
宾有为的博客
02-22 1万+
菜单栏就是所谓的正常状态看不到二级和三级菜单，当你移鼠标到指定的位置后显示出来，因此，实现二级菜单栏只需要两行css代码就可以了。以下是未添加任何特效的效果图 1、打开写网页代码的软件，并新建一个html网页文件，在body里写上html代码： <body> <div class="a"> <ul> <li> <a href="#"&...
HTMl+CSS制作二级菜单或二级导航栏
热门推荐
m0_49406079的博客
01-05 2万+
二级菜单的实现思路为： 1.在默认状态下，使用display:none;将二级菜单隐藏。 2.当一级菜单中的列表标签li获取焦点(hover)后，使用display:blick;将二级菜单显示出来。 3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。 　　本内容面向小白向，我在代码中加了详细的注释，解释了语句的作用。 　　二级菜单展开后 效果如下(没有美化，见谅)： 　　　HTMl代码如下：...
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 6610
二级导航栏的制作
Html5+CSS3 实现网站头部 导航栏和二级导航栏
小绵杨
11-03 1万+
需求 利用html5和css3来做一个网站头部，以及包含二级菜单的导航栏。 实现图如下：悬浮导航栏展开二级导航栏 实现 css代码：index.css /* css样式初始化 */ * { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: non
html怎样 做二级菜单,HTML制作二级下拉菜单的方法步骤
weixin_31649177的博客
06-30 1万+
网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写一个div标签,并且给这个div标签添加一个id。02然后在div里面嵌套一个p标签，p标签里面放置了一个主菜单“头像”。我们要做的效果就是当鼠标放在“头像”这里就会弹出下拉菜单。03然后我们使用*清除所有元素的margin和padding值。04接着我们来设置id为ic...
css3menu导航栏制作
04-17
CSS3Menu 是一款制作网页导航菜单的工具，并且导出标准的 html + css 文件。拥有漂亮的 CSS 导航菜单，是很多同学都希望的。CSS3Menu 能帮助你十分简单并且省事的创建一个导航栏菜单，你只需点几下鼠标，选几种颜色...
鼠标移上显示的下拉菜单，和鼠标移上时显示的导航，html，JavaScript代码
zayyo的博客
05-23 386
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <Style> *{ margin: 0; padding.
html中向上的菜单怎么写,使用HTML+CSS实现鼠标划过的二级菜单栏的示例
weixin_39930671的博客
05-30 439
本文介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例，分享给大家，具体如下：先上效果图：1、鼠标没在上面2、鼠标放在一级菜单上，展开二级菜单3、鼠标放在二级菜单上代码：二级菜单测试/*为了使菜单居中*/body {padding-top:100px;text-align:center;}/* -------------菜单css代码----------begin---------- */....
HTML鼠标移至导航栏触发链接，保存当前的导航位置
若星
12-03 1656
在HTML界面的导航栏中，设置鼠标移动到元素上面就改变颜色，同时鼠标无需点击直接触发链接，在一个iframe中显示对应界面内容；当鼠标移开后，此刻iframe界面中对应于导航栏中的元素颜色不变，直到进入其他链接界面时元素颜色才变回原样。    当移动鼠标的下一个元素时： 鼠标移开到其他区域： 代码实现： HTML： &lt;ul class="menu" &gt; &lt...
HTML+CSS项目实践二：单纯利用CSS制作导航栏下拉菜单效果（不使用JS）
王迪
12-20 2870
知识点：CSS属性、盒子定位、伪类选择器的使用 实现效果：   制作思路： 1、先制作一个div盒子，用来放置导航菜单（一级菜单），设置盒子的高度和背景颜色。 2、一级菜单，使用ul无序列表制作，设置li标签浮动到一行，且取消项目符号。 3、需要设置二级菜单的li标签里，再嵌套ol标签制作。 4、二级菜单默认隐藏，只有鼠标悬浮在一级菜单上时，才会显示出对应的二级菜单。     ...
html 中怎么写二级导航,HTML+CSS实现二级导航
weixin_39613951的博客
05-30 1326
一. 简单的说就是列表里面再嵌套一个列表：HTML教程辉辉傻逼 辉辉傻逼 辉辉傻逼 二. css样式设置应由外向内设置样式。先介绍几种样式：display:block:表示元素显示为行级元素，独占一行。可设置元素的宽度和高度。display:inline-block:表示元素显示为内联行级元素，既可并排显示，也可设置元素的宽度和高度。font:14px/20px arial;表示字体大小为1...
html+css 实现导航栏二级菜单——气泡框
m0_55879104的博客
06-07 2261
HTML+CSS 实现二级菜单气泡框
html表格二级右侧菜单,CSS3二级导航菜单制作步骤详解
weixin_39628105的博客
06-02 830
如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动态显示与隐藏。1结构一般导航的主体我们主要是使用ulli标签首页产品小程序微信企业站服务技术支持产品外包关于我们人才招聘2布局导航的布局，由于子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么...
前端如何单独做虚拟奖金池？
最新发布
weixin_43968658的博客
04-13 940
【代码】前端如何单独做虚拟奖金池？
html怎么把图片当作导航栏,css利用一张背景图制作导航菜单实现思路及代码
06-11
要把图片当作导航栏，可以使用HTML中的`<img>`标签，并使用CSS设置其样式，比如设置宽高、边框等。然后将图片放置在导航栏的位置即可。 以下是CSS利用一张背景图制作导航菜单的实现思路及代码： 1. 首先，需要一个包含导航菜单的HTML结构，比如一个无序列表。每个导航菜单项可以用`<li>`标签表示。 2. 然后，使用CSS设置导航菜单的样式，包括宽度、高度、背景颜色等。这里需要注意的是，不要设置导航菜单项的背景颜色。 3. 接着，在CSS中设置背景图，并设置其重复方式为水平平铺。这里的背景图就是导航菜单项的背景图。 4. 最后，设置每个导航菜单项的样式，包括字体颜色、大小、对齐方式等。同时，设置每个导航菜单项的左、右边距为背景图的宽度，使其能够覆盖背景图。 下面是代码示例： HTML： ``` <ul class="nav-menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> ``` CSS： ``` .nav-menu { width: 800px; height: 50px; background-color: #333; background-image: url(nav-bg.png); background-repeat: repeat-x; list-style: none; margin: 0; padding: 0; } .nav-menu li { float: left; margin: 0 20px; } .nav-menu li a { display: block; color: #fff; font-size: 16px; line-height: 50px; text-align: center; text-decoration: none; width: 100%; height: 100%; padding: 0 20px; } .nav-menu li a:hover { background-color: #666; } ``` 在上面的代码中，`nav-bg.png`是背景图的文件名，可以替换成其他文件名。通过设置`background-repeat: repeat-x;`，可以让背景图在水平方向上平铺。同时，通过设置每个导航菜单项的左、右边距为`20px`，可以使其覆盖背景图。最后，当鼠标悬停在导航菜单项上时，可以显示出不同的背景色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值