【HTML前端学习】简单的书签式菜单选择设置

先看效果图

该设计实现了书签式的页面切换，同时鼠标移动到书签上时显示解释说明弹窗

以下为css样式文件

/* 标签栏的样式 */
.tabs {/* 标签栏的主体内容布局设置 */padding: 5px 0px 5px 0px;align-items: center;display: flex;justify-content: center;text-align: center;}
/* 激活的标签栏的设置 */
.tabs__tab--active {/* 边框制造半透明阴影 */border-left: 1px solid;border-right: 5px solid;border-top: 1px solid;border-color: rgba(0, 0, 0, 0.2);/* 隐藏底部边框 */border-bottom-color: transparent;/* 圆角 */border-top-left-radius: 10px;border-top-right-radius: 10px;
}/* 标签栏的主体内容解释弹窗功能设计 */
/* 标签栏的主体内容样式 */
.container {/* 设置主体内容的位置 */position: relative;padding: 5px 0px 5px 0px;}.container__trigger:hover .container__content {/* 鼠标位于标签主体上时显示弹窗 */display: block;
}
/* 标签栏的主体内容解释弹窗样式 */
.container__content {padding: 5px 0px 5px 0px;/* 弹窗的边框 */border: 1px solid rgba(0, 0, 0, 0.3);border-top: 0px;margin-top: -1px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;/* 弹窗默认隐藏 */display: none;/* 使用绝对位置来显示弹窗 */left: 0px;position: absolute;top: 100%;/* 使弹窗宽度与主体宽度一致（美观） */width: 100%;/* 使弹窗位于元素上方，不被遮挡 */background: #ffffff8c;z-index: 9999;}

以下为html代码

<div class="tabs"><!-- 激活的书签设置 --><!-- 通常我们只有一个激活的书签 --><!-- 根据你的书签数量来设置width的大小 --><div id="left_tab" class="tabs__tab--active" style="width: 33%" onclick="change_tabs(this)"><!-- 书签内容 --><div class="container"><div class="container__trigger"><!-- 书签内容 --><div>左</div><!-- 弹窗内容 --><div class="container__content">左边栏</div></div></div></div><!-- 未激活的书签设置 --><div id="mid_tab" class="tabs__tab--inactive" style="width: 33%" onclick="change_tabs(this)"><!-- 书签内容 --><div class="container"><div class="container__trigger"><!-- 书签内容 --><div>中</div><!-- 弹窗内容 --><div class="container__content">中间栏</div></div></div></div><!-- 未激活的书签设置 --><div id="right_tab" class="tabs__tab--inactive" style="width: 33%" onclick="change_tabs(this)"><!-- 书签内容 --><div class="container"><div class="container__trigger"><!-- 书签内容 --><div>右</div>!-- 弹窗内容 --><div class="container__content">右边栏</div></div></div></div>
</div><script type="text/javascript">//点击改变书签的激活情况function change_tabs(elem){if(elem.className=="tabs__tab--inactive"){//如果当前书签未激活//获取已激活的书签var act_tabs=document.getElementsByClassName("tabs__tab--active");//将已激活的书签变为未激活for(var i = 0; i < act_tabs.length; i++) {act_tabs[i].className = "tabs__tab--inactive";}//激活当前的书签elem.className="tabs__tab--active";}}
</script>

css样式原始素材资源网站推荐

csslayout.io
cssgr.id
grid.layout
CSS Diner
Loading.io

【HTML】简单的书签式菜单选择设置相关推荐

开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗？
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...
开发一个出生年份的下拉选择框供用户选择_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 01 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 02 下拉菜单 ...
access字段属性设置下拉列表_关于下拉式菜单，这一篇足够了
下拉菜单主要有两种类型: 1.用于导航的下拉菜单: 2.用于表单的下拉菜单. 在本文中,我们将对以下内容进行介绍: 1. 结构剖析下拉菜单的解剖结构与文本输入字段的解剖结构非常相似. 2.下拉菜单类 ...
下拉式菜单在GridView编辑时联动选择
父子下拉式菜单DropDownList在GridView编辑时联动选择. 本Demo从添加时的父子DropDownList联动选择,以及在GridView的编辑时联动功能实现. 文件格式:.wmv;大 ...
Unity游戏开发文档（3.1.2）：下拉式音乐选择菜单
前言该文档为<Unity游戏开发文档(3):Dancing Line>的附属文档,亦可看作是单独的技术总结文档. 目录综述构建下拉菜单填充下拉菜单切换背景音乐最终效果 ...
响应式移动端框架_简单，响应式，移动优先导航
响应式移动端框架我们将构建一个简单的响应式网站导航. 我们的解决方案将帮助我们强调页面的内容 ,可以说是设计移动设备时的重中之重. 不会涉及JavaScript,我们将通过Mobile First方 ...
powerbuilder提示不是下拉窗口_制作简易工资查询模板，下拉菜单选择姓名即可显示...
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 以前小编分享过多种工资表变工资条的方法,不知道小伙伴们都看过没有. 今天分享一个简单的工资查询模板,生成一个人的工资条,通 ...
Android开发笔记（一百零一）滑出式菜单
可移动页面MoveActivity 滑出式菜单从界面上看,像极了一个水平滚动视图HorizontalScrollView,当然也可以使用HorizontalScrollView来实现侧滑菜单.不过今天 ...
win7计算机开始里没有设置,win7电脑开始菜单的设置方法
win7电脑开始菜单的设置方法,使用win7系统过程中,有时需要进行开始菜单设置,一些用户不知开始菜单怎么设置,那么可参照以下的方法进行操作. windows开始菜单相信有很多电脑用户都不会感到陌生, ...

【HTML】简单的书签式菜单选择设置

【HTML前端学习】简单的书签式菜单选择设置

【HTML】简单的书签式菜单选择设置相关推荐

最新文章

热门文章