状态输出导航栏html,css3与html5实现响应式导航菜单(导航栏)效果分享

此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单。

HTML

示例中有一个导航菜单的html结构,元素用来定位导航菜单,.current表示当前活动的导航项。

复制代码代码如下:

  • 首页
  • 客户服务
  • 产品展示
  • 经典案例
  • 联系我们

CSS

首先我们要给菜单nav相对定位,我们在.nav li中使用display: inline-block代替float:left,这样一来我们可以使用text-align 来对nav菜单进行左中右对齐设置。

复制代码代码如下:

.nav {

position: relative;

margin: 20px 0;

}

.nav ul {

margin: 0;

padding: 0;

}

.nav li {

margin: 0 5px 10px 0;

padding: 0;

list-style: none;

display: inline-block;

}

.nav a {

padding: 3px 12px;

text-decoration: none;

color: #999;

line-height: 100%;

}

.nav a:hover {

color: #d0d0d0;

}

.nav .current a {

background: #999;

color: #fff;

border-radius: 5px;

}

使用text-align对菜单进行右对齐和居中对齐。

/* right nav */

.nav.right ul {

text-align: right;

}

/* center nav */

.nav.center ul {

text-align: center;

}

接下来我们来做响应式设计,我们使用CSS3的media query来实现。当浏览器窗口宽度小于600px时,我们把设置成relative相对定位,把

  • 设置成absolute绝对定位,并且display:none隐藏所有li元素,这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时,菜单下拉展开,设置所有li的样式display: block,具体请看代码:

复制代码代码如下:

@media screen and (max-width: 600px) {

.nav {

position: relative;

min-height: 40px;

}

.nav ul {

width: 180px;

padding: 5px 0;

position: absolute;

top: 0;

left: 0;

border: solid 1px #aaa;

background: #fff url(images/menu.png) no-repeat 10px 11px;

border-radius: 5px;

box-shadow: 0 1px 2px rgba(0,0,0,.3);

}

.nav li {

display: none; /* hide all items */

margin: 0;

}

.nav .current {

display: block; /* show only currentitem */

}

.nav a {

display: block;

padding: 5px 5px 5px 32px;

text-align: left;

}

.nav .current a {

background: none;

color: #666;

}

/* on nav hover */

.nav ul:hover {

background-image: none;

}

.nav ul:hover li {

display: block;

margin: 0 0 5px;

}

.nav ul:hover .current {

background: url(images/check.png) no-repeat 10px 7px;

}

/* right nav */

.nav.right ul {

left: auto;

right: 0;

}

/* center nav */

.nav.center ul {

left: 50%;

margin-left: -90px;

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/519009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pandas时序数据处理入门

作为一个几乎每天与时间序列数据打交道的人员,我发现panda Python包在时间序列的操作和分析方面有强大优势。 这篇关于panda时间序列数据处理的基本介绍可以带你入门时间序列分析。本文将主要介绍以下操作: 创建一个日期范围处理时间戳数据将字符串数据转换为时间…

大侦探福老师——幽灵Crash谜踪案

闲鱼Flutter技术的基础设施已基本趋于稳定,就在我们准备松口气的时候,一个Crash却异军突起冲击着我们的稳定性防线!闲鱼技术火速成立侦探小组执行嫌犯侦查行动,经理重重磨难终于在一个隐蔽的角落将其绳之以法! 幽灵Cr…

html中心对齐,html – 对齐内联块中心

中心对齐内联块元素的最简单方法是什么?理想情况下,我不想为元素设置宽度.这种方式取决于在元素内输入的文本,内联块元素将扩展到新的宽度,而不必改变CSS内的宽度.内联块元素应该彼此重心(不是并排),以及元素内的文本.请参阅下面的代码或参见jsFiddle.当前的HTML&am…

linux shell脚本关闭指定端口号的进程

关闭指定进程中关键词的进程,最好找一个唯一标识 例如:项目名称 等等 文章目录一、管道方式1. 关闭指定程序进程号2. 关闭指定端口号的进程(推荐使用)3. 关闭指定进程关键词的进程(推荐使用)4. 操作记录5. 知识补充二、jps方式2.1. 使用场景说明2.2. 不同…

6 个步骤,教你在Ubuntu虚拟机环境下,用Docker自带的DNS配置Hadoop | 附代码

作者 | tianyouououou责编 | Carol来源 | CSDN 博客封图 | CSDN付费下载于视觉中国最近,作者整理了一套Hadoop搭建方案。最后的镜像大小1.4G多,使用docker子网,容器重新启动不需要重新配置/etc/hosts文件。配置过程中参考了如下博客&#xff…

开发函数计算的正确姿势——支持 ES6 语法和 webpack 压缩

首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源&#xff…

quarz 定时任务 cron表达式

文章目录1. 表达式符号2. 通配符说明:3. 常用表达式例子:1. 表达式符号 说明允许填写的值允许的通配符秒0-59, - * /分0-59, - * /时0-23, - * /日1-31, - * /月1-12 / JAN-DEC, - * ? / L W周1-7 or SUN-SAT, - * ? / L #年1970-2099, - * / 2. 通配符说明: * 表示所有值。…

邮件格式转换html,HTML邮件模板 - lenglingx的个人页面 - OSCHINA - 中文开源技术交流社区...

邮件要求兼容 outlook 等邮箱软件,发现很多样式都不生效。找到的模板如下:尊敬的开发者:                         “xxx”在此次的‘网络友好度测试’评级:4颗星(最高5颗星)。注意点不支持头部style、外…

Apache Cassandra 数据存储模型

我们在《Apache Cassandra 简介》文章中介绍了 Cassandra 的数据模型类似于 Google 的 Bigtable,对应的开源实现为 Apache HBase,而且我们在 《HBase基本知识介绍及典型案例分析》 文章中简单介绍了 Apache HBase 的数据模型。按照这个思路,A…

解决Navicat 出错:1130-host . is not allowed to connect to this MySql server,MySQL

use mysql; select host,user from user; update user set host% where userroot; flush privileges;

Knative Eventing 中 Channel 如何注入默认 Provisioner

场景 通常的在创建Broker时,我们需要通过 spec.ChannelTemplate 指定使用某个具体的 Channel Provisioner。例如这样的Broker: apiVersion: eventing.knative.dev/v1alpha1 kind: Broker metadata:name: pubsub-channel spec:channelTemplate:provisioner:apiVers…

删库跑路事件发生,SaaS云服务如何守护数据安全

作者 | 蒋敏峰责编 | Carol封图 | CSDN付费下载于视觉中国近日,某SaaS服务商/微盟遭遇员工删库跑路,服务器出现大面积故障,一时间让平台上的几百万家商户生意基本停摆。这一事件发生后,不管是厂商还是平台上的用户,都在…

express模板引擎 html,Express使用html模板的代码分析

express默认使用jade模板,可以配置让其支持使用ejs或html模板。1.安装ejs在项目根目录安装ejs.npminstallejs2、引入ejsvarejsrequire(ejs);//我是新引入的ejs插件3、设置html引擎app.engine(html,ejs.__express);设置视图引擎app.set(viewengine,html)…

记一次吐血的ping: unknown host

背景: 某客户的ECS,ping域名提示unknown host,ping ip则可以通,ping的时候抓包没有解析的包出去,是解析的问题吗?1,测试ping域名以及抓包发现没有dns的解析包出去 # ping www.baidu.com -c 1 p…

Navicat连接mysql8.0.1版本出现1251--Client

bash ALTER USER root% IDENTIFIED WITH mysql_native_password BY 123456;

Nacos Committer 张龙:Nacos Sync 的设计原理和规划

与你同行,抬头便是星空。 本文整理自Nacos Committer 张龙的现场分享,阿里巴巴中间件受权发布。 随着 Nacos 1.0.0 稳定版的发布,越来越多的企业开始在测试/预演/生产环境中逐步部署 Nacos。目前,除了部分企业已处于转型分布式架…

Linux 会成为主流桌面操作系统吗?

整理 | 屠敏出品 | CSDN(ID:CSDNnews)2020 年 1 月 14 日,微软正式停止了 Windows 7 系统的扩展支持,这意味着服役十年的 Windows 7,属于它的时代真的终结了,说不出的再见,只能怀恋。…

阿里搜索推荐系统又双叒叕升级了?!

搜索导购产品作为搜索的流量入口,承载了为用户导购推荐、搜索流量分流的重要功能。主要产品包括:首页底纹、下拉推荐、搜索发现、导航、历史搜索等。经过几年的探索和积累,各个产品越发地成熟,机器学习算法广泛地应用于导购产品中…

怎么把html转换成jpg6,html转为图片(六):xhtmlrenderer

引入依赖包org.xhtmlrenderercore-rendererR8 不支持css,js案例:public class Xhtmlrenderer { private String inputFilename "G:/index.html"; private String outputFilename "G:/html.png"; private int widthImage 1000; private int h…

oracle 查看当前登录用户和所有用户

oracle 查看当前用户名 show user select user from dualoracle 查看所有用户名 select * from all_users