HTML css jQuery实现导航栏(华丽动画)

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>HTML css jQuery实现导航栏(华丽版)</title><style>* {/* 清除默认内边距 */padding: 0;/* 清除默认外边距 */margin: 0;}body {/* 设置默认字体 */font-weight: '微软雅黑';/* 设置字体大小 */font-size: 16px;/* 默认字体颜色 */color: #FFF;/* body背景色 */background-color: rgba(0, 0, 0, .5);}a {/* 去除下划线 */text-decoration: none;}ul li {/* 去除默认格式 */list-style: none;}.header {width: 100%;min-width: 1400px;height: auto;min-height: 50px;position: relative;}.header-nav {width: 100%;min-height: 50px;}.layout-nav {width: 1200px;height: auto;min-height: 70px;margin: auto;}.header-nav {z-index: 100;}.layout-nav {position: relative;}.header_logo {height: 20px;/* 行高,使文本y轴居中 */line-height: 20px;/* 绝对定位,靠左 */left: 0;/* 字体大小 */font-size: 1.5rem;/* 斜体 */font-style: oblique;/* 粗体 */font-weight: bold;}.menu_list {/* 行级转换块级 */display: block;height: 72px;line-height: 72px;/* 绝对定位样式 */left: 29%;top: 0 !important;}.menu_item {/* 使li左浮动,成行 */float: left;/* 宽度取值与子菜单 */width: 64px;/* li左右间距 */margin: 0 30px;/* 文本加粗 */font-weight: bold;/* 弹性布局 */display: flex;/* 子菜单列排列 */flex-direction: column;align-items: center;/* 相对定位-提供父级定位给li.dis_line */position: relative;}.language {/* 高度 */height: 20px;/* 绝对定位属性 */right: 0;}.header_logo,.menu_list,.language {/* 启用绝对定位 */position: absolute;/* 距离顶部高度 */top: 25px;}.language a:hover {color: #FFF;}.dis_list {/* 行高 */line-height: 45px;/* 隐藏子菜单 */display: none;margin-top: -15px;}.menu_item:hover .dis_list {/* 鼠标悬浮显示子菜单 */display: block;}.dis_item {line-height: 40px;/* 子菜单文本不加粗 */font-weight: 500;}.dis_item a:hover {/* color: #00aaff !important; */border-bottom: 1px solid;}.dis_line {/* 动态下划线父级容器布局 */height: auto;width: 100%;/* 启用弹性盒子布局 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 绝对定位-取父级定位于li.menu_item */position: absolute;top: 50px;}.itline {/* 动态下划线 */display: inline-block;height: 4px;width: 0px;background-color: #00aaff;}/* 统一样式 */.header_logo,.menu_item a,.dis_item a,.language a,.language i {/* 统一抬高z轴高度 */z-index: 100;}.header_logo,.menu_item a,.dis_item a {/* 统一设定初始颜色 */color: #FFF;}.language a,.language i {/* 统一设定初始颜色 */color: #e8e5e5;}.blackColor {color: #000 !important;}/* 动画 */.bacShow {/* 动画名称 运行时长 变化曲线 等待时长 变化次数 是否重复 是否还原 运行暂停 *//* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */animation: anim_bacshow .5s ease 0s 1 normal forwards running;}@keyframes anim_bacshow {0% {height: 70px;background-color: rgba(255, 255, 255, 0);}100% {height: 330px;background-color: rgba(255, 255, 255, 1);}}.listShow {animation: anim_listshow .5s ease 0s 1 normal forwards running;}@keyframes anim_listshow {0% {margin-top: -15px;}100% {margin-top: 0px;}}.lineWidth {animation: anim_linewidth .5s ease 0s 1 normal forwards running;}@keyframes anim_linewidth {0% {width: 0px;}100% {width: 35px;}}</style></head><body><div class="header"><div class="header-nav"><div class="layout-nav"><a href="#" class="header_logo" contenteditable>LOGO</a><ul class="menu_list"><li class="menu_item"><a class="_txt" href="#">点击</a><ul class="dis_list"><li class="dis_line"><a href="#" class="itline"></a></li><li class="dis_item"><a href="#">公司简介</a></li><li class="dis_item"><a href="#">发展历程</a></li><li class="dis_item"><a href="#">业务架构</a></li><li class="dis_item"><a href="#">管理团队</a></li><li class="dis_item"><a href="#">企业文化</a></li></ul></li><li class="menu_item"><a class="_txt" href="">点击</a><div class="dis_line"></div><ul class="dis_list"><li class="dis_line"><a href="#" class="itline"></a></li><li class="dis_item"><a href="#">公司简介</a></li><li class="dis_item"><a href="#">发展历程</a></li><li class="dis_item"><a href="#">业务架构</a></li><li class="dis_item"><a href="#">管理团队</a></li><li class="dis_item"><a href="#">企业文化</a></li></ul></li><li class="menu_item"><a class="_txt" href="">点击</a><div class="dis_line"></div><ul class="dis_list"><li class="dis_line"><a href="#" class="itline"></a></li><li class="dis_item"><a href="#">公司简介</a></li><li class="dis_item"><a href="#">发展历程</a></li><li class="dis_item"><a href="#">业务架构</a></li><li class="dis_item"><a href="#">管理团队</a></li><li class="dis_item"><a href="#">企业文化</a></li></ul></li><li class="menu_item"><a class="_txt" href="">点击</a><div class="dis_line"></div><ul class="dis_list"><li class="dis_line"><a href="#" class="itline"></a></li><li class="dis_item"><a href="#">公司简介</a></li><li class="dis_item"><a href="#">发展历程</a></li><li class="dis_item"><a href="#">业务架构</a></li><li class="dis_item"><a href="#">管理团队</a></li><li class="dis_item"><a href="#">企业文化</a></li></ul></li><li class="menu_item"><a class="_txt" href="">点击</a><div class="dis_line"></div><ul class="dis_list"><li class="dis_line"><a href="#" class="itline"></a></li><li class="dis_item"><a href="#">公司简介</a></li><li class="dis_item"><a href="#">发展历程</a></li><li class="dis_item"><a href="#">业务架构</a></li><li class="dis_item"><a href="#">管理团队</a></li><li class="dis_item"><a href="#">企业文化</a></li></ul></li></ul><div class="language"><a class="lan_cn" href="#">简</a><i class="lan_line">|</i><a class="lan_hc" href="#">繁</a><i class="lan_line">|</i><a class="lan_en" href="#">EN</a></div></div></div></div></body>
</html><!-- 引入jQuery库 -->
<script src="js/jquery-3.6.1.js"></script><!-- 本地位置 -->
<script src="http://code.jquery.com/jquery-latest.js"></script><!-- 网络位置 --><script>// $(".menu_list")绑定hover方法$(".menu_list").hover(handlerIn, handlerOut); //mouseenter,mouseleave//鼠标移入元素方法--mouseenterfunction handlerIn() {$(".header-nav").addClass("bacShow");$(".header_logo").addClass("blackColor");$(".menu_item").children().addClass("blackColor");$(".language").children().addClass("blackColor");$(".dis_list").children().children().addClass("blackColor");$(".itline").addClass("lineWidth");$(".dis_list").addClass("listShow");};//鼠标移出元素方法--mouseleavefunction handlerOut() {$(".header-nav").removeClass("bacShow");$(".header_logo").removeClass("blackColor");$(".menu_item").children().removeClass("blackColor");$(".language").children().removeClass("blackColor");$(".dis_list").children().children().removeClass("blackColor");$(".itline").removeClass("lineWidth");$(".dis_list").removeClass("listShow");};
</script>

HTML css jQuery实现导航栏(华丽动画)相关推荐

【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
浮动导航栏php源码,JQuery 浮动导航栏实现代码
JQuery 浮动导航栏 /* 浮动导航栏 Begin */ #floatMenu { padding-top: 5px; background: url(http://img.jb51.net/im ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
闲着无聊，撸个微信导航栏的动画吧！
/ 开始 / 微信自发布以来,底部导航栏的动画一直让开发者津津乐道,而且伴随着版本更新,底部导航栏的动画也一直在改进.我最近在闲暇之余,看了下微信的底部导航栏动画,于是思考了下这个动画的原理, ...
使用Html+Css实现简易导航栏(导航栏遇到鼠标切换背景颜色)
Ⅰ.问题描述: 使用html+css实现简易导航栏: **要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色: Ⅱ实现过程如下: 1.运行软件VScode,亲测可实现: ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...

HTML css jQuery实现导航栏(华丽动画)

HTML css jQuery实现导航栏(华丽动画)相关推荐

最新文章

热门文章