阿龙的下拉菜单demo

下拉菜单：

样式：

鼠标移入出现下滑菜单效果：

html的boby部分：

   <nav id="navbar"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li>Services<i class="fas fa-angle-down"></i><ul><li> <a href="#">Web Development</a></li><li><a href="#">Website Design</a></li><li> <a href="#">Mobile Development</a></li><li> <a href="#">SEO</a></li></ul></li><li>Blog<i class="fas fa-angle-down"></i><ul><li>   <a href="#">HTML <span>22 Posts</span></a></li><li><a href="#">CSS <span>16 Posts</span></a></li><li><a href="#">JavaScript <span>10 Posts</span></a></li><li><a href="#">Python <span>13 Posts</span></a></li><li><a href="#">PHP <span>10 Posts</span></a></li><li><a href="#">Design <span>22 Posts</span></a></li></ul></li><li><a href="#">Contact</a></li></ul></nav><header id="showcase"><h1>南舍的下拉菜单demo</h1></header>

css：
1.重置浏览器默认样式

*{padding: 0;margin: 0;box-sizing: border-box;
}

box-sizing: border-box;的作用：告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

2.基本设定：

/* 定义css变量*/
:root{--primary-color:coral;--secondary-color: chocolate;}
html,boby{background-color: #f4f4f4;font-family: Arial, Helvetica, sans-serif;
}#navber ul{list-style: none;
}#navbar ul li{color: #333;display: inline-block;/*行内块元素*/padding: 1rem;position: relative;/* 定位时遵循父相子绝*/
}#navbar ul li a{color: #333;text-decoration: none;/* 去除下划线*/
}/* hide  ne */
#navbar ul li ul{display: none;/*去掉无序列表的点 */
}#navbar ul li:hover{cursor: pointer;background: var(--primary-color);color: #ffff;
}
#navbar ul li:hover a{color: #ffff;}

第一行的定义css变量也可以直接颜色关于css变量请参考css变量详情

3.设置下拉窗口：

#navbar ul li:hover ul{display: block;position: absolute;left: 0;width: 200px;margin-top: 1rem;}#navbar ul li:hover ul li{display: block;,/* 鼠标移入时，li由行内块元素变为块元素*/background: #e7e7e7;
}#navbar ul li:hover ul li a{color: #333333;
}#navbar ul li:hover ul li:hover{background: #e0e0e0;color: inherit;
}
/*对文字进行修饰*/
#navbar ul li:hover ul li span{float: right;color: #fff;background-color: var(--secondary-color);/*应用自定义变量*/padding: 0.2rem 0.5rem;text-align: center;font-size: 0.8rem;border-radius: 5px;}

3.设置下面显示内容：

#showcase{display: flex;flex-direction: column;height: 300px;justify-content: center;align-items: center;/*行内居中*/text-align: center;/*垂直居中*/padding: 0 2rem;background-color: coral;
}#showcase h1{color: #fff;font-size: 4rem;
}

4.设置当浏览器的页面大小发生改变时的样式：

@media(max-width: 600px) {#navbar ul li{display: block;}#navbar ul li:hover ul{width: 100%;position: relative;}
}

效果如下：

鼠标移入后：

阿龙的下拉菜单demo相关推荐

CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
[deviceone开发]-多种样式下拉菜单demo
一.简介该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单主要用到的控件是do_A ...
HMTL/CSS——下拉菜单DEMO
效果: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
element Dropdown二级下拉菜单
开发中经常遇见二级菜单开发,但是element中的Dropdown下拉菜单demo没有二级,所以在此记录一下. 此代码适用一级菜单二级菜单.样式需自己重新调整. 效果如图: html 代码 < ...
iOS 多级下拉菜单
前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下多级下拉菜单二级下拉筛选菜单. ...
纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
jQuery三级下拉菜单
演示地址:http://www.corange.cn/demo/3738/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

阿龙的下拉菜单demo

下拉菜单：

阿龙的下拉菜单demo相关推荐

最新文章

热门文章