响应式CSS3和JQUERY下拉菜单

最新推荐文章于 2021-12-04 12:20:17 发布

转载最新推荐文章于 2021-12-04 12:20:17 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/13112

文章标签：

#jquery #css3 #javascript

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这篇博客介绍了如何使用HTML和CSS来创建适用于移动设备的响应式导航菜单。通过设置meta标签、CSS样式和JavaScript，实现菜单在不同屏幕尺寸下的适配，包括隐藏与显示子菜单的功能，以及在悬停和选中状态下的样式变化。此外，还涉及到下拉菜单的结构和样式设计，确保在保持良好用户体验的同时，实现菜单的动态交互效果。

下载地址

HTML将建立移动浏览器视窗meta标签来控制布局一个典型的移动设备优化网站包含类似下面的CSS和JavaScript链接下面的代码:JavaScript构建为移动和选择导航显示和隐藏子菜单会有下面的代码:下拉菜单中会有以下结构homeHome ServiceHome ResponsiveaboutservicesportfolioPortfolio 3 Portfolio 4 Portfolio SinglePortfolio TwoblogDesignHTML5CSS3jQuerycontact级联样式表(CSS)/*===== nav style ======*/#fdw nav select { display:none; /* this is just for the mobile display */}#fdw nav ul { display:block; z-index:999999;}#fdw nav ul li { display:inline-block; padding:50px 3px 30px; margin-left:30px; position:relative;}#fdw nav ul li a:link, #fdw nav ul li a:visited { color:#444; font:normal 20px "Yanone Kaffeesatz", sans-serif; text-transform:uppercase; display:inline-block; position:relative;}#fdw nav ul li a:hover, #fdw nav ul li a:active { color:#e25d29; text-decoration:none;}#fdw nav ul li span { position:absolute; right:-12px; bottom:6px; width:7px; height:8px; margin:0 0 0 3px; float:right; display:block; background:url("images/nav_arrow.png") no-repeat left -8px; font:0/0 a;}#fdw nav ul li.current { border-bottom:2px solid #e25d29;}#fdw nav ul li.current a { color:#e25d29; cursor: default;}#fdw nav ul li.current a span { background:url("../images/nav_arrow.png") no-repeat left 0;}#fdw nav ul li.current ul li a { cursor:pointer;}/*===== sub_menu Style =======*/#fdw nav ul li ul.sub_menu { position:absolute; top:90px; left:0; margin:0; padding:0; background:#fff; border:1px solid #ececec; border-top:5px solid #e25d29; display:none; z-index:999999; -moz-box-shadow: 0px 6px 7px #121012; -webkit-box-shadow: 0px 6px 7px #121012; box-shadow: 0px 6px 7px #121012;}#fdw nav ul li ul.sub_menu li.arrow_top { position:absolute; top:-12px; left:12px; width:13px; height:8px; display:block; border:none; background:url("images/arrow_top.png") no-repeat left top;}#fdw nav ul li ul.sub_menu li { float:none; margin:0; padding:0; border-bottom:1px solid #ececec;}#fdw nav ul li ul.sub_menu li a { white-space: nowrap; width: 150px; padding:12px; font:13px Arial, tahoma, sans-serif; text-transform:capitalize; color:#777;}#fdw nav ul li ul.sub_menu li a:hover { background:#f9f9f9; color:#333;}#fdw nav ul li ul.sub_menu li a.subCurrent { color:#e25d29; cursor:default;}#fdw nav ul li ul.sub_menu li a.subCurrent:hover { background:none;}

dd: