左中侧导航栏组件

最新推荐文章于 2023-02-26 18:31:57 发布
最新推荐文章于 2023-02-26 18:31:57 发布
阅读量380 收藏
点赞数
分类专栏： 前端开发 页面组件 JavaScript 文章标签： 前端 导航栏组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenjiusui8083/article/details/79038781
版权

大笑2018.1.11 21:35pm

左中侧效果：


可直接使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LeftSidebar</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;

		}
		.nav{
			width: 160px;
			height: auto;
			position: fixed;
			left:0;
			top:50%;
			/*计算方法：每个行高40*4+1*4(边框宽)负数*/
			margin-top: -164px;
			font-family: "Microsoft Yahei";
			cursor: pointer;
		}
		.nav-li{
			width: 160px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-align: center;
			background:#333;
			border: 1px solid #fff;
			font-size: 16px;
			position: relative;
		}
		.list-2{
			width: 160px;
			height: auto;
			position: absolute;
			left:160px;
			top:0;
			display: none;
			opacity: 0.9;
		}
		.list-2 ul{
			 width: 160px;
			 height: auto;
			 background: #333;
			 list-style: none;

		}
		.list-2 ul li{
			width: 160px;
			height: 40px;
			line-height: 40px;
			color:#d298b2;
			font-size: 16px;
			text-align: center;

		}
		.nav-li:hover .list-2{
			display: block;
		}
		
	</style>
</head>
<body>
	<div class="nav">
		<div class="nav-li">
			<div class="tit">一级栏目</div>
			<div class="list-2">
				<ul>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
			   </ul>
			</div>
			
		</div>
		<div class="nav-li">
			<div class="tit">一级栏目</div>
			<div class="list-2">
				<ul>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
			   </ul>
			</div>
		</div>
		<div class="nav-li">
			<div class="tit">一级栏目</div>
			<div class="list-2">
				<ul>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
			   </ul>
			</div>
		</div>
		<div class="nav-li">
			<div class="tit">一级栏目</div>
			<div class="list-2">
				<ul>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
				<li>二级栏目01</li>
			   </ul>
			</div>
		</div>
	</div>

</body>
</html>


夏天的风欧阳冰嫣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
左侧导航栏tab
llt299022的博客
04-24 534
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
vue左侧导航栏
葫芦娃的博客
11-15 3328
1.在element官网找到模板: 2. 添加和@click=“toPage(’/helloworld’)”,如下: <div id="login"> <el-row class="tac"> <el-col :span="4"> <h5>我的系统</h5> <el-menu ...
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
（十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-23 6291
VUE侧边菜单栏导航设计（1）理解并逐步掌握VUE组件的含义；（2）深入理解VUE单页面应用；（3）初步掌握VUE路由的概念和使用方法。
后台——侧边和面包屑导航栏设计与实现方案
forever__fish的博客
01-06 1578
后台管理系统最重要的功能之一无疑是导航的设计，不管是侧边导航栏还是头部面包屑导航栏，导航与路由如何去匹配是开发人员需要去考虑的问题。点击侧边导航栏的某一项可以跳转到当前页面的路由，头部面包屑导航也会按照当前路由显示相应的导航。
基于element ui VUE 2 VUE router的侧边导航栏以及顶部路由历史记录的组件
syc123syc123syc的博客
09-19 1894
app.vue（下面这些样式是我自己为了方便写的，也可以创建一个css文件单独放），这里主要是引入这两个自定义组件，搭配el-container（element ui里的一个很好用的布局组件）使用,如果有登录页面的话就用vue挂载一个登录状态v-if判断一下el-container和登录组件使用哪个就可以啦。换了个新公司搬砖，环境比以前好了干活都开心，最近有个后台要写想了想以后重复写这几个组件挺麻烦的就干脆搞了几个可复用组件,以下的内容就拿我这个新项目示例吧，直接贴代码啦。还有topView.vue。
前端项目实战之Web端常见的侧边导航栏组件封装
yiguoxiaohai的博客
10-14 1150
前端B端开发，web常常会用到导航栏，下面进行封装
一个漂亮的侧面导航栏
11-12
现代前端框架如React、Vue或Angular也有相关的组件库，提供预设的导航栏组件，简化开发过程。 8. **SEO优化**：对于搜索引擎优化，导航栏的结构应清晰，便于爬虫理解页面结构。使用语义化的HTML元素，如标签，有助...
组件首页导航栏和左侧菜单栏
最新发布
09-25
- 在`App.vue`或任何需要展示导航栏和侧边栏的组件中，导入并使用这两个组件。 ```javascript import Navbar from '@/components/Navbar.vue'; import Sidebar from '@/components/Sidebar.vue'; export ...
vant侧边导航栏SideBar
07-03
在你的组件中，可以这样使用SideBar： ```vue import { ref } from 'vue'; import { useSidebar } from 'vant'; export default { setup() { const activeKey = ref('1'); const options = [ { title: '...
手机网站简单左侧边栏导航菜单.rar
05-23
手机网站简单左侧边栏导航菜单基于jquery.min.js、jquery.simplesidebar.js、jquery-ui.min.js制作，红色风格，点击显示隐藏左侧边栏导航菜单，适用于手机、平板电脑等移动端网站使用。
Simpler Sidebar简单的 jQuery侧边栏插件
09-15
Simpler Sidebar简单的 jQuery侧边栏插件
侧滑sidebar+tabbar自定义
03-08
左右两侧都可侧滑，侧滑有动画效果 + tabbar自定义的框架
Simple Sidebar Navigation
10-16
想过为你的博客添加自定义的导航没，Simple Sidebar Navigation这款插件可以帮你实现这个想法，它可以让你的博客导航看上去更加的明朗，方便访客的访问，当插件安装好后，你不需要修改、添加任何代码，就可以使用了。 Simple Sidebar Navigation特点： •多层次的显示链接导航的结构 •添加导航链接 •自定义标题、URL、target属性 •无限量导航部件 •设置导航下拉列表 •支持自定义下拉菜单的CSS Simple Sidebar Navigation插件安装： 1.下载Simple Sidebar Navigation插件，将压缩包解压后，把文件夹上传到wp-content/plugins/目录下，登录WordPress管理后台，点击“Plugins”找到上传的插件，激活该插件。 2.插件激活后，在后台的左侧栏中“setting”--->“Simple Navigation”链接，点击链接对其进行设置，如下图(点击浏览大图)： 设置的内容都在图中进行了标示，这款插件其实也没有什么要设置的，无法就是添加CSS、导航列表之类的，你可以根据自己的情况进行选择 3.设置好相关内容后，在后台的左侧栏中的找到“Appearance”--->“Widgets”中把它添加到侧栏中去，添加成功后，显示如下页面： 如上图所示，要设置的内容也就那么多，添加好就可以了，这里就多说了，，感兴趣的话，就安装个吧！O(∩_∩)O~
基于Vue实现的侧边栏导航组件
04-14
基于Vue实现的侧边栏导航组件,左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具有动画居中效果,可以滑动右侧区域来切换导航,滑动到屏幕底部时自动切换到下个导航,相反滑动到顶部切换上一屏,效果展示: https://image-static.segmentfault.com/405/972/40597237-cef893b747aeab81
bootstrap3 侧边导航栏
11-15
这里，`navbar-inverse`类用于设置导航栏为深色背景，`sidebar`类则是Bootstrap3中用于侧边栏的样式。`role="navigation"`是一个辅助性属性，有助于无障碍访问。 然后，为了让侧边导航栏在小屏幕设备上折叠，我们...
Qt导航栏Demo之侧边垂直菜单
02-17
在本文中，我们将深入探讨如何使用Qt框架创建一个侧边垂直菜单导航栏。Qt是一个功能强大的C++库，广泛用于跨平台的图形用户界面（GUI）开发。在许多应用程序中，垂直导航栏作为主菜单布局，能有效地节省空间并提供更...
vue侧边栏导航，右侧显示对应内容
热门推荐
weixin_42429288的1博客
10-30 8万+
最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 age...
自己动手写一个侧导航栏组件
weixin_34099526的博客
02-27 318
github仓库地址：https://github.com/meidongwei... 在当前这个大移动时代，我们写的网页越来越注重手机端的适配，这得益于 CSS3 的媒体查询，我也是在工作中有这样的需求，要对移动端友好，理所当然，我就想到了响应式设计，今天说的这个侧导航栏组件就是其中一角。 侧导航栏在移动端会隐藏，显示一个触发按钮，...
bootstrap侧边导航栏
09-18
其中，bootstrap 也提供了侧边导航栏组件，方便开发者在网站中添加侧边导航栏。 使用 bootstrap 的侧边导航栏，首先需要在 HTML 文件中引入 bootstrap 的 CSS 和 JS 文件。然后，在页面的合适位置添加侧边导航栏的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值