html+css+JavaScript实现导航栏

最新推荐文章于 2024-05-22 13:34:30 发布
最新推荐文章于 2024-05-22 13:34:30 发布
阅读量1.9k 收藏 13
点赞数 1
分类专栏： Web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Komatsu_1137/article/details/110295639
版权

无下拉菜单的导航栏

<!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>
cutlery1137
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html+jquery+CSS实现最简单的右侧导航栏效果
12-31
本教程将详细讲解如何使用HTML、CSS和jQuery来实现一个最简单的右侧导航栏效果。这个导航栏将具有响应式设计，能在不同设备上良好展示，并能通过点击事件动态显示和隐藏。 首先，我们从HTML结构开始。一个基础的...
JS+CSS实现内凹导航栏
08-08
在移动互联网时代，导航栏是一个非常重要的元素，它能够帮助用户快速找到所...下面使用JS + CSS实现一个内凹导航栏，内凹导航栏则是一种比较流行的设计风格，它能够让导航栏看起来更加立体和美观，视觉效果也非常不错。
JavaScript实现仿新浪下拉菜单的显示隐藏
weixin_59531237的博客
04-29 567
JavaScript实现仿新浪下拉菜单的显示隐藏
JavaScript教程（三）之 jQuery
m0_56752010的博客
05-28 2405
JavaScript库 即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等； 简单理解：就是一个JS文件，里面对我们原生JS代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了；比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）； 常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext
使用HTML+CSS+JavaScript实现导航栏
最新发布
2301_81034686的博客
05-22 507
使用简单的HTML+CSS+JavaScript知识，我们可以设置简单的网页导航栏菜单项点击时高亮转移，使得用户清楚自己所在的网页的内容区域。除了这种方法，我们还可以使用其他前端知识实现这种效果。
HTML和CSS+JS创建手风琴式菜单
Aruko的博客
08-08 1175
HTML部分(含JS) CSS部分（选择器部分和阿里图标库部分） 如下所示的简易手风琴菜单 HTML部分 我是在JSP页面上写的 注：JavaScript的代码是我直接找的别人的，我并没有学过JS所以也不懂 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html> <head> <me
js下拉菜单
爬楼梯的前端小白的博客
01-19 621
使用js做新浪微博下拉菜单
最全pink老师JavaScript笔记-JavaScript 基础部分（同步PPT）
qq_45432867的博客
08-01 7971
浏览器分成两部分：渲染引擎和js引擎浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行执行ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。...
基于HTML+CSS+JAVASCRIPT实现静态导航网页【100012473】
05-25
在完成这个项目的过程中，你将深入理解HTML、CSS和JavaScript的协同工作原理，掌握网页的基本构建模块和动态效果的实现方法。通过文件名"webpage-design"推测，你可能需要创建一个设计稿或实际的网页原型，以展示你...
html+css侧边抽屉式导航栏
09-14
以下将详细讲解如何使用HTML和CSS创建一个侧边抽屉式导航栏。 首先，我们需要构建HTML结构。一个简单的侧边抽屉导航栏可能包括一个包含导航链接的`<nav>`元素，以及一个触发导航栏显示/隐藏的按钮。示例如下： ```...
京东首页Html+css+javascript代码
04-15
此外，CSS3的过渡（transition）、动画（animation）特性可以实现动态效果，如导航栏的高亮效果和轮播图的平滑切换。 接着，JavaScript是实现交互功能的关键。在这个项目中，JavaScript可能用于实现动态效果，如...
js仿微博动态栏功能
12-09
知识有限，目前只写了发布动态的功能，没有写兼容，后面再慢慢完善。嘿嘿 效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博</title> <style> body, p, img, ul, li { margin: 0; padding: 0; } body { background-image: url("http://cdn.attach.qdfuns.com/notes/pics/201612/07/212742f92tpe2wve095ttp.jpg")
js代码-PINK老师-创建类和对象
07-15
js代码-PINK老师-创建类和对象
CSS+JS实现结构化无限级导航菜单列表(直接调用)
gee_56的专栏
03-11 1502
今天跟大家分享一下如何通过HTML的结构化方式实现无限级导航菜单列表的功能！首先让大家看一下两个实例演示—— [无限级竖式菜单列表] [无限级横式菜单列表] 这里详细分析的并非JS的源码部分（封装好的JS源码是从国外网站摘录下来的），而是前台直接调用的关键部分，主要有三点—— 1、直接调用的JS函数 ddlevelsmenu.setup(导航菜单ID, 列表方式); 显然易见，我们要预先
HTML5网页设计小案例：网页导航栏的设计
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 4948
html+css+javascript+echarts设计的demo，快来学习吧
非常全的HTML+CSS+JS学习记录（二：文件路径）
CSDN_YJX的博客
01-19 1085
目录第一天 第一天
用JS写的一个简单的导航栏
热门推荐
聂亚兵的博客
09-05 1万+
选项卡 * { margin: 0; padding: 0; } span { display: inline-block; margin-left: 30px; width: 150px; height: 40px; background: #FFFFFF; border-bottom: 2px so
最全pink老师JavaScript笔记-JQuery 入门 基础部分（同步PPT）
qq_45432867的博客
08-17 1960
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。常见的JavaScript 库这些库都是对原生 JavaScript 的封装，内部都
html+css+js实现导航栏的内容选中状态的代码
05-26
可以使用JavaScript来实现导航栏的内容选中状态。 首先，给导航栏中的每个选项添加一个点击事件。在点击事件中，先移除所有选项的选中状态，然后给当前点击的选项添加选中状态。 HTML代码示例： ``` <nav> <ul> <li><a href="#" class="active">选项1</a></li> <li><a href="#">选项2</a></li> <li><a href="#">选项3</a></li> </ul> </nav> ``` CSS代码示例： ``` nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; } nav a { display: block; padding: 10px; text-decoration: none; } nav a.active { background-color: #ccc; } ``` JavaScript代码示例： ``` const navLinks = document.querySelectorAll('nav a'); navLinks.forEach(link => { link.addEventListener('click', function() { // 移除所有选项的选中状态 navLinks.forEach(link => { link.classList.remove('active'); }); // 给当前点击的选项添加选中状态 this.classList.add('active'); }); }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值