编写导航栏（无需写js代码）

最新推荐文章于 2024-06-04 16:14:20 发布
最新推荐文章于 2024-06-04 16:14:20 发布
阅读量565 收藏 1
点赞数 


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery编写导航栏</title>
	<style type="text/css">
		#navigation{
		    width:1180px;
		    padding:8px;
		    margin:5px auto;
		    background:#3b5998;
		    height:16px;
		    font-size:14px;
		}
		#navigation ul{
		    margin-top: 0;
		    list-style-type:none;
		}
		#navigation ul li{
		    float:left;
		    margin-right:14px;
		    position:relative;
		    z-index: 100;
		}
		#navigation ul li a{
		    padding:0 8px;
		    font-weight:700;
		    color:#FFFFFF;
		    text-decoration: none;
		}
		#navigation ul li ul{
		    background:#88c366;
		    position:absolute;
		    overflow:hidden;
		    display:none;
		    padding-left:0;
		    list-style-type:none;
		}
		#navigation ul li:hover ul{
		    background:#88c366;
		    position:absolute;
		    width:100px;
		    display:block;
		    padding-left:0;
		}
		#navigation ul li ul li{
		    border-bottom: 1px solid #bbb;
		    text-align:left;
		    width:100%;
		}
		#navigation ul li ul li:hover{
		    background:#3b5998;
		}
	</style>
</head>
<body>
    <div id="navigation">
    	<ul>
    		<li>
    			<a href="#">首页</a>
    		</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>
    			</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>
    	</ul>
    </div>
</body>
</html>

ywj5200
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端Vue项目——初始化及导航栏
infotw的博客
06-24 9847
正文 一、项目初始化 　　创建webpack模板项目如下所示： MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone...
js横向导航栏
05-06
4. **优化与扩展**：为了使导航栏更具可维护性和适应性，我们可以将JavaScript代码封装为一个函数或者模块，方便在其他项目中复用。此外，还可以添加动画效果，如平滑的过渡动画，以提高用户体验。 在"无限级绿色...
uniapp中自定义导航栏
weixin_55010007的博客
05-19 2万+
相信很多小伙伴在使用uniapp进行多端开发的时候呢，在面对一些奇葩的业务需求的时候，uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了，这个时候就需要我们自己自定义导航栏使用啦。 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用，今天也给大家分享一个我自己写的导航栏啦，希望大家多多指点 首先我们在自定义导航栏的时候，我们需要知道头部的导航栏有哪几部分组成，那么我们以微信小程序为例 可以看到在微信小程序中，我们的头部导航栏其实受到右上角胶囊的限制比较大，这个时候我们自定
layui导航栏
OpenSource_的博客
08-06 1830
LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。 LayUI优点 由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6/7以外的全部浏览器，并且多数结构支持响应式。 La...
微信小程序自定义底部导航栏，切换不同页面显示不同tabbar
马果的博客
03-19 1万+
    在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。    此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮...
uni-app学习---项目搭建、配置、设置导航栏
ChenLingZhi1115的博客
06-04 1163
uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。总：编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、h5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台。
Layui前端框架导航栏使用介绍
热门推荐
Tiger的专栏
05-12 3万+
LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。 LayUI优点 由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6/7以外的全部浏览器，并且多数结构支
Vue中的路由导航
故常无，欲以观其妙；常有，欲以观其徼；
04-19 736
<h1>用户组件</h1><p>{{$route.params}}</p></div>''<div><h1>登陆组件</h1><p>{{$route.query}}</p></div>''<div><h1>注册组件</h1><p>{{$route.query}}</p></div>''<div><h1>登陆页面</h1>
vue动态加载导航栏-从数据中读取导航数据
myTiLife的博客
08-07 3607
说明： 近期编写vue项目从数据库中获取导航栏，记录下。 项目 vue-element-admin vue项目是根据 大佬 上传结构的这个简单修改的，搜索 vue-element-admin 第一个就是，附上地址： vue-element-admin 可以仔细研究下这个项目，很强。 所有修改文件说明 一，需要改写的js(整理)： 根据项目结构需要修改： 【api】包下的 user.js：获取后台传的树形结构 json 方法。 【router】包下 index.js 就是我们的加载的路由设置为空数组就好啦
TinyNav.js - 简单易用的导航栏插件
gitblog_00015的博客
03-15 389
TinyNav.js - 简单易用的导航栏插件 TinyNav.js 是一个轻量级的 jQuery 插件，用于将大的水平导航栏转换为垂直移动设备友好的菜单。 项目简介 TinyNav.js 的目标是解决响应式网页设计中常见的问题——如何在有限的空间内显示大量的导航选项。此插件通过自动创建一个基于给定类名的下拉菜单，使您可以轻松地将大的桌面导航栏转换为适用于手机和平板电脑的小型垂直菜单。 功能特性 ...
吸顶导航栏、吸顶导航栏.zip
05-11
2. JavaScript监听滚动事件：使用JavaScript或jQuery监听滚动事件，当页面达到一定位置时，通过改变CSS样式实现导航栏的吸顶效果。 3. 响应式设计：考虑到移动设备的多样性，需使用媒体查询（media queries）确保在...
javascript 导航栏源码
10-08
在这个特定的资源中，我们拥有的是使用JavaScript编写的现成导航栏代码，可以直接在项目中应用或作为学习的基础。 首先，JavaScript在网页动态效果和交互性方面扮演着重要角色，它允许我们在用户与页面交互时更新...
下滑固定导航栏插件Scroll.zip
07-04
当用户滚动页面时，导航栏会在页面的某个特定位置（通常是到达顶部或设定位置）自动变为固定状态，使得用户无论在页面的哪个位置都能方便地访问导航链接，无需手动滚动回顶部。这种效果在长页面或内容丰富的网站中...
react-demo:用react写的一个底部导航栏
05-02
- 为了使底部导航栏具有良好的视觉效果，我们需要编写CSS样式。React可以与CSS Modules、styled-components或CSS-in-JS库（如emotion或jss）配合使用，实现样式模块化和动态化。 6. **安装和设置**： - 题目中...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
BPM低代码平台认证考试详解及答疑
1. 表单模型中的有效性校验：默认情况下，可以通过工具栏的【表单规则】功能进行配置，无需自行编写JavaScript事件，选项A为正确答案。 2. 存储模型中的UI组件支持：支持在组件中进行自定义设置，例如支持【导航树...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值