html+css+JavaScript实现导航栏

无下拉菜单的导航栏

<!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>* {padding: 0;margin: 0;}a {text-decoration: none;font-size: 14px;}li {list-style: none;}.nav {margin: 100px;}.nav li {float: left;width: 80px;height: 40px;text-align: center;line-height: 40px;}.nav li a {display: block;width: 100%;height: 100%;color: #333;}.nav li a:hover {background-color: #eee;}</style>
</head>
<body><ul class="nav"><li><a href="#">登录</a></li><li><a href="#">登录</a></li><li><a href="#">登录</a></li></ul>
</body>
</html>

有下拉菜单的导航栏

注意子选择器>的使用

<!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>* {padding: 0;margin: 0;}a {text-decoration: none;font-size: 14px;}li {list-style: none;}.nav {margin: 100px;}.nav>li {float: left;width: 80px;height: 40px;text-align: center;line-height: 40px;}.nav li a {display: block;width: 100%;height: 100%;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul a:hover {background-color: #FFF5DA;}</style>
</head>
<body><ul class="nav"><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><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><ul><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li><li><a href="#">评论</a></li></ul></li></ul><script>var nav = document.querySelector('.nav');var lists = nav.children;for(var i = 0; i < lists.length; i++) {lists[i].onmouseover = function() {this.children[1].style.display = 'block';}lists[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script>
</body>
</html>

html+css+JavaScript实现导航栏相关推荐

css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
使用Html+Css实现简易导航栏(导航栏遇到鼠标切换背景颜色)
Ⅰ.问题描述: 使用html+css实现简易导航栏: **要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色: Ⅱ实现过程如下: 1.运行软件VScode,亲测可实现: ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...
【前端】javascript实现导航栏筋斗云效果特效
实现效果: 实现效果如下图所示实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

html+css+JavaScript实现导航栏

无下拉菜单的导航栏

有下拉菜单的导航栏

html+css+JavaScript实现导航栏相关推荐

最新文章

热门文章