精华内容
下载资源
问答
  • 主要介绍了element-ui 实现响应式导航的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 创建响应式下拉菜单是一项棘手的任务。 在设计和开发阶段,您必须做出许多决定。 推荐的解决方案通常取决于您正在构建的网站或应用程序的特征。 但是,对于所有类型的响应下拉菜单,也推荐一些常规最佳实践。 1....

    响应式下拉菜单栏

    创建响应式下拉菜单是一项棘手的任务。 在设计和开发阶段,您必须做出许多决定。 推荐的解决方案通常取决于您正在构建的网站或应用程序的特征。 但是,对于所有类型的响应下拉菜单,也推荐一些常规最佳实践。

    1.使用移动优先设计

    问题

    尽管先为台式机屏幕设计菜单然后将其适应较小的视口似乎比较容易,但通常情况并非如此,尤其是在菜单具有下拉菜单的情况下。

    如果您首先设计用于台式机的菜单,它可能会很快变得复杂,并且最终可能会在移动设备上出现一个非常长的菜单,用户仅需不断滚动就可以滚动,而没有到达终点!

    您可以使用min-width媒体查询而不是max-width min-width媒体查询来实现移动优先设计:

    @media all and (min-width: 960px) {
        // ...
    }

    使用min-width媒体查询时,移动设计将是默认设置,您将通过先移动到平板电脑然后移动到台式机屏幕来添加规则(或者在某些情况下,甚至不需要为平板电脑单独设计) 。

    从性能的角度来看,这也很重要。 如果使用移动优先设计,则智能手机(经常通过计量数据连接或不连续的wifi访问您的网站)必须评估较少的样式规则,因为它们可以跳过媒体查询块。

    2.重新排序菜单项

    问题

    在许多情况下,您可能希望在移动设备,平板电脑和台式机屏幕上以不同的顺序显示菜单和子菜单项,但希望保持HTML大纲的逻辑性和可访问性。

    使用order属性,可以更改菜单项的可视顺序,同时保持DOM不变。

    根据经验,HTML大纲中的菜单项应遵循最适合屏幕阅读器和其他辅助技术用户的顺序。 不要忘记,搜索引擎机器人也只类似于HTML阅读器,而看不到视觉顺序,因此它也类似于屏幕阅读器。

    这是一个由号召性用语按钮和菜单链接组成的菜单示例。 我们希望号召性用语(CTA)出现在移动设备和平板电脑上的菜单开头,以及桌面设备上的菜单结尾。 在HTML中,菜单链接将排在最前面(但是,这不是必须的,因为在某些情况下,您可能想将号召性用语按钮放在屏幕阅读器用户的前面)。

    <nav>
            <ul>
                <li class="mlink">Menu Link 1</li>
                <li class="mlink">Menu Link 2</li>
                <li class="mlink">Menu Link 3</li>
                <li class="cta">CTA 1</li>
                <li class="cta">CTA 2</li>   
            </ul>
        </nav>

    由于order的默认值为0,因此您不必为第一个元素更改它。 对于视觉顺序中的第二个元素,其值为1。对于第三个元素,其值为2,依此类推。 请注意, order也可以取负值。 因此,CSS如下所示:

    ul {
        display: flex;
    }
    .mlink {
        order: 1;
    }
    @media all and (min-width: 960px) {
        .mlink {
            order: 0;
        }
    }

    注意order属性仅适用于flexbox和CSS网格布局,因此,如果要使用它,则需要添加以下任一display: flex;display: grid; 到父菜单项。

    3.在手机和平​​板电脑上使用事件监听器

    问题

    在桌面上,通常使用:hover伪类激活子菜单。 当用户将鼠标悬停在父菜单项上时,关联的子菜单会在屏幕上弹出。 当他们将鼠标移开时,子菜单消失。 但是,在移动设备,平板电脑和其他触摸设备上没有:hover

    通过使用JavaScript事件侦听器,只要用户单击/触摸父菜单项,就可以打开和关闭子菜单。 addEventListener()方法是DOM API的一部分,并从IE9内置到每个现代浏览器中。

    以下代码示例摘自上述我的flexbox菜单教程 ,每当用户单击父菜单项时,它就会添加或删除.submenu-active类。 可以使用CSS添加.submenu-activedisplay样式。

    /* Activate Submenu */
    function toggleItem() {
      if (this.classList.contains("submenu-active")) {
        this.classList.remove("submenu-active");
      } else if (menu.querySelector(".submenu-active")) {
        menu.querySelector(".submenu-active").classList.remove("submenu-active");
        this.classList.add("submenu-active");
      } else {
        this.classList.add("submenu-active");
      }
    }
    
    /* Event listeners */
    for (let item of items) {
        if (item.querySelector(".submenu")) {
          item.addEventListener("click", toggleItem, false);
        }   
    }
    for...of循环遍历所有菜单项,然后if 块选择具有子菜单的对象,并向其添加click事件监听器。 每当用户单击/点按带有子菜单的菜单项时,都会调用自定义toggleItem()函数。 

    可以使用事件侦听器定位DOM API中的许多事件 。 对于触摸设备, clicktouchstart是最常用的设备。 上面,我们使用了click因为它同时适用于click和touch,而touchstart仅适用于touch而不适用于click。

    注意 :使用addEventListener()方法只能定位一种事件类型。 与jQuery相比,这是一个重要的区别,在jQuery中,您可以向用于事件监听器的on()方法添加多个事件。

    4.在桌面上单击和悬停之间选择

    问题

    现在您的子菜单可以在移动设备和平板电脑上使用,这是另一个问题:在台式机上,您可能希望使用户能够将鼠标悬停在该子菜单上而不是单击。 但是,如果您已经添加了单击事件侦听器以在触摸设备上显示子菜单,则桌面菜单将同时对单击悬停做出React。

    这两个用户操作很容易相互干扰,这可能导致混乱,甚至在某些情况下甚至破坏菜单的布局。

    在桌面视口上,您需要确定子菜单是在悬停还是单击时显示。 通常,我想说的是,如果您要构建一个Web应用程序,请选择click,因为这是大多数Web应用程序用户所希望的行为。 而且,如果您正在构建网站,请选择悬停,因为它在网站上感觉更自然。

    如果选择单击

    如果您决定将click事件处理程序保留在桌面上,则需要解决一个小的UX问题。 当用户离开菜单区域导航时,子菜单不会自行关闭(这是悬停时的正常行为)。 要关闭子菜单,用户将不得不导航回到父菜单项并再次单击它,这不是理想的用户体验。

    要解决此问题,您可以使用以下脚本,该脚本使用户可以通过单击页面上的任意位置来关闭子菜单。

    /* Close Submenu From Anywhere */
    function closeSubmenu(e) {
      let isClickInside = menu.contains(e.target);
    
      if (!isClickInside && menu.querySelector(".submenu-active")) {
        menu.querySelector(".submenu-active").classList.remove("submenu-active");
      }
    }
    
    /* Event listener */
    document.addEventListener("click", closeSubmenu, false);

    每当在文档内部但在菜单区域之外单击时,它将事件监听器添加到document对象,并删除.submenu-active类。

    如果您选择悬停

    如果选择悬停,则需要使用JavaScript检测视口的大小,并向事件侦听器添加一个额外的if语句,以检查视口的宽度是否小于媒体查询断点。 您可以使用document对象的clientWidth属性来检测视口的宽度(不包括任何滚动条)。

    因此,在上面的代码中,调用自定义toggleItem()函数的事件侦听器循环将更改为:

    if (document.documentElement.clientWidth < 960) {
      for (let item of items) {
          if (item.querySelector(".submenu")) {
            item.addEventListener("click", toggleItem, false);
          }     
      }
    }

    在CSS中,您需要将负责桌面子菜单布局的规则添加到:hover伪类中。

    5.对空的父菜单项使用不带href属性的<a>标记

    问题

    很多时候,父菜单项仅用于打开和关闭所属子菜单,但它们没有链接到任何地方。 但是,如果要保持HTML轮廓一致和CSS样式表简单,则还需要向这些“空”菜单项添加<a href="#">锚标记。

    但是,在这种情况下,当用户单击父菜单项打开或关闭子菜单时,页面将重新加载并跳至移动设备的顶部。 如果菜单较长,这尤其糟糕。

    解决此问题的常见方法是添加"javascript: void(0);" href属性的值。 但是,这是一种不好的做法 ,因为它使用伪URL,该伪URL返回undefined作为值,这可能导致不同的错误和意外的行为。

    解决此问题的最简单方法是对空菜单项使用没有href属性的<a>标记,这是一种有效的解决方案,因为href不是必需的属性。 根据W3C文档

    aarea元素上的href属性不是必需的; 当这些元素没有href属性时,它们将不会创建超链接。”

    但是,空<a>标记有两个问题:

    1. 它们无法通过键盘访问,因为默认选项卡顺序将其省略。 您可以通过将tabindex="0"属性添加到每个没有href属性的<a>标签来解决此问题。
    2. 即使选项卡顺序中包含空的<a>元素,用户也无法通过键盘上的Enter来打开/关闭关联的子菜单。 这可以通过为keypress事件创建事件侦听器来解决。

    因此,这就是HTML的结构方式:

    <ul class="menu">
        <li class="item"><a href="home.html">Home</a></li>
        <li class="item"><a href="about.html">About</a></li>
        <li class="item has-submenu">
            <a tabindex="0">Services</a>
            <ul class="submenu">
                <li class="subitem"><a href="service1.html">Service 1</a></li>
                <li class="subitem"><a href="service2.html">Service 2</a></li>
                <li class="subitem"><a href="service3.html">Service 3</a></li>
            </ul>
        </li>
        <li class="item has-submenu">
            <a tabindex="0">Plans</a>
            <ul class="submenu">
                <li class="subitem"><a href="plan1.html">Plan 1</a></li>
                <li class="subitem"><a href="plan2.html">Plan 2</a></li>
                <li class="subitem"><a href="plan3.html">Plan 3</a></li>
            </ul>
        </li>
        <li class="item">li><a href="blog.html">Blog</a></li>
        <li class="item"><a href="contact.html">Contact</a></li>
    </ul>

    对于事件侦听器,您可以使用我们创建的用于打开/关闭子菜单的相同自定义toggleItem()函数。 您只需按以下方式向上述for...of循环添加一个keypress事件侦听器:

    for (let item of items) {
        if ( item.querySelector(".submenu")) {
          item.addEventListener("click", toggleItem, false);
          item.addEventListener("keypress", toggleItem, false);
        }    
    }


    6.使图标脱机可用

    问题

    如果您使用在线图标字体库(例如Font Awesome)将图标添加到下拉子菜单(例如常用的向下箭头),则当离线访问网站/应用程序时,图标将消失。 请注意,脱机可用性也是可访问性问题。

    解决该问题的方法相对容易。 您也可以从本地加载图标库,而不是从CDN加载图标库。 例如,您可以按以下方法亲自托管Font Awesome 。 如果仅加载您在站点上使用过的部分库,甚至可以节省页面加载,即使这还取决于特定图标库的结构。

    响应式下拉菜单最佳做法就是这样!

    建立响应式下拉菜单似乎很容易,但是,您需要注意许多细节。 它需要在不同的设备上工作,对不同的事件做出正确的React,键盘用户可以访问,可以离线使用等等。

    如果您认为通过使用案例通常可以访问您的网站或应用程序,则可以更轻松地决定如何解决用户尝试使用您的子菜单时可能出现的所有问题。

    您认为我们没有提及其他最佳做法吗? 让我们知道!

    分叉此:响应下拉菜单解决方案

    在CodePen上查看我的自适应下拉菜单,该菜单使用了本指南中介绍的所有最佳实践。 分叉它,并对其进行更改以适合您自己的项目!

    进一步了解Tuts +上的导航设计

    翻译自: https://webdesign.tutsplus.com/articles/best-practices-for-responsive-dropdown-menus--cms-35212

    响应式下拉菜单栏

    展开全文
  • jquery导航栏响应式菜单示例。需要的自己下载
  • 侧栏菜单模块化响应式模板是一款大气扁平化设计网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • jquery bootstrap侧边隐藏响应式下拉导航菜单栏
  • 为了给导航添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
  • 使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单
  • 本资源为HTML左侧菜单栏源代码。动画效果包含鼠标悬浮,菜单拉出等。图标使用了fontawsome。
  • 第四课制作响应式导航栏菜单源码.zip
  • html5 jquery响应式菜单制作手机端响应式悬浮菜单特效代码
  • 代码演示了Bootstrap基本导航及更加美观导航的实现方法,为导航增加字体图标,并用yamm实现大型导航菜单。效果图如下:
  • Bootstrap响应式多级下拉导航菜单基于bootstrap.3.3.6.min.css和jquery-1.11.0.min.js制作,界面简洁,四级下拉导航菜单
  • jQuery响应式侧滑二级菜单栏是一款基于jQuery CSS3 HTML5实现的右侧滑出二级菜单。
  • jQuery响应式导航菜单基于jquery-1.8.3.min.js和pgwmenu.min.js制作,三种菜单样式,缩小浏览器窗口宽度菜单自动隐藏效果。
  • vue实现二级响应式导航

    千次阅读 2019-06-05 17:11:50
    1.通过vue实现表现和数据分离 2.实现了二级导航 3.兼容pc端和移动端 <!DOCTYPE html> <html>...响应式二级导航</title> <style type="text/css"> ...

    1.通过vue实现表现和数据分离
    2.实现了二级导航栏
    3.兼容pc端和移动端

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<!--禁止浏览器缓存-->
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    		<meta http-equiv="Pragma" content="no-cache" />
    		<meta http-equiv="Expires" content="0" />
    		
    		<title>响应式二级导航栏</title>		
    				
    		<style type="text/css">
    			*{
    				box-sizing: border-box;
    			}
    			html,body,div,ul,li,a{
    				padding: 0;
    				border: 0;
    				margin: 0;
    			}
    			a{
    				text-decoration: none;
    				color: #000;
    			}
    			ul{
    				clear: both;
    				text-decoration: none;
    				white-space: nowrap;
    			}
    			li{
    				list-style: none;
    			}
    			.logo img{
    				height: 46px;
    				width: auto;
    			}
    			nav{
    				display: flex;
    				display: -webkit-flex; /* Safari */
    				flex-direction: row;
    				flex-wrap: wrap;
    				justify-content: flex-start;
    				align-items: center;
    				padding: 0 30px;
    				background: darkgray;
    			}
    			nav > .nav-item{
    				position: relative;				
    				padding: 20px 30px 20px 0;
    			}
    			nav .nav-item a{
    				display: inline-block;
    				width: 100%;
    			}
    			nav > .nav-item > a:visited{
    				color: #000;
    			}
    			nav > .nav-item > a:hover,
    			nav > .nav-item > a:focus{
    				color: #fff;
    			}
    			nav > .nav-item > .dropdown{
    				position: absolute;
    				top: 50px;/*需根据需求来做调整*/
    				left: 0;
    				display: none;
    				border-radius: 3px;
    				border: 1px solid darkgray;
    			}
    			@media all and (min-width: 768px) {
    				nav > .nav-item > .dropdown{
    					padding-top: 20px;
    				}
    			}
    			nav > .nav-item:hover .dropdown{
    				display: block;
    			}
    			.dropdown li a{
    				padding: 10px 30px;
    			}
    			.dropdown > li >a:hover{
    				color: darkgray;
    			}
    			nav .nav-item-form{
    				flex: 1;
    				-webkit-flex: 1;
    				text-align: right;
    				padding-right: 0;
    			}
    			nav form input,
    			nav form button{
    				padding: 6px 10px 6px;
    			}
    			.nav-btn{
    				display: none;
    				position: absolute;
    				top: 15px;
    				right: 15px;
    				z-index: 99999;
    				padding: 5px 5px 3px;
    				cursor: pointer;
    			}
    			.nav-btn span{
    				display: block;
    				width: 15px;
    				height: 2px;
    				background: #000;
    				margin-bottom: 2px;
    			}
    			@media all and (max-width: 768px) {
    				nav{
    					position: absolute;
    					display: none;
    					width: 100%;
    					top: 0;
    					right: 0;
    					z-index: 99998;
    					padding : 0 15px 30px;
    				}
    				nav > .nav-item{
    					width: 100%;
    				}
    				nav form{				
    					flex: 1;
    					text-align: left;
    				}
    				nav > .nav-item > .dropdown{
    					position: relative;
    					top: 0;
    					left: 0;
    					display: block;
    					height: 0;
    					overflow: hidden;
    				}
    				.dropdown li{
    					padding: 10px 0px;
    					font-size: 13px;
    				}
    				.dropdown li a{
    					padding: 0;
    				}
    				nav > .nav-item{
    					padding: 20px 0 0;
    				}
    				.dropdown > li >a:hover{
    					color: dimgray;
    				}
    				nav > .nav-item:hover .dropdown{
    					height: auto;
    				}
    				.nav-btn{
    					display: inline-block;
    				}
    			}
    		</style>
    		
    		<!-- <script src="./vue.min.js"></script> -->
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!--vue插件 视图层与数据分离-->
    	</head>
    	<body>
    		<div id="app">
    			<nav id="nav">
    				<div class="nav-item nav-item-logo logo">
    					<img src="http://via.placeholder.com/88x46" >
    				</div>
    				<div v-for="item in bookCatas" class="nav-item">
    					<a v-if="item.url!=''" :href="item.url">{{ item.booktype }}</a>
    					<a v-else href="##">{{ item.booktype }}</a>
    					<ul v-if="item.url==''" class="dropdown">
    						<li v-for="li in item.ul">
    							<a v-if="li.url!=''" :href="li.url">{{ li.bookname }}</a>
    						</li>
    					</ul>
    				</div>
    				
    				<div class="nav-item nav-item-form">
    					<form action="" method="get">
    						<input type="text" name="search"value="" />
    						<button type="submit">搜索</button>
    					</form>
    				</div>
    			</nav>
    			<button type="button" class="nav-btn" id="nav-btn"><!--按钮-->
    				<span></span>
    				<span></span>
    				<span></span>
    			</button>
    		</div>
    
    		<script type="text/javascript">
    			const vue = new Vue({
    				el: '#app',
    				data: {
    					bookCatas: [
    						{
    							'booktype' : '经管',
    							'url': 'http://book.dangdang.com/01.25.htm'
    						},
    						{
    							'booktype' : '文艺',
    							'url': '',
    							'ul':[
    								{
    									'bookname': '文学',
    									'url': 'http://book.dangdang.com/01.05.htm'
    								},
    								{
    									'bookname': '传记',
    									'url': 'http://book.dangdang.com/01.38.htm'
    								},
    								{
    									'bookname': '青春文学',
    									'url': 'http://book.dangdang.com/01.01.htm'
    								}
    							]
    						},
    						{
    							'booktype' : '小说',
    							'url': 'http://e.dangdang.com/classification_list_page.html?category=XS2&dimension=dd_sale&order=0'
    						},
    						{
    							'booktype' : '励志',
    							'url': 'http://book.dangdang.com/01.21.htm'
    						},
    						{
    							'booktype' : '人文社科',
    							'url': '',
    							'ul':[
    								{
    									'bookname': '军事',
    									'url': 'http://book.dangdang.com/01.27.htm'
    								},
    								{
    									'bookname': '历史',
    									'url': 'http://book.dangdang.com/01.36.htm'
    								},
    								{
    									'bookname': '古籍',
    									'url': 'http://book.dangdang.com/01.32.htm'
    								}
    							]
    						},
    						{
    							'booktype' : '科技',
    							'url': '',
    							'ul':[
    								{
    									'bookname': '计算机/网络',
    									'url': 'http://book.dangdang.com/01.54.htm'
    								},
    								{
    									'bookname': '科普读物',
    									'url': 'http://book.dangdang.com/01.52.htm'
    								},
    								{
    									'bookname': '建筑',
    									'url': 'http://book.dangdang.com/01.55.htm'
    								},
    								{
    									'bookname': '农业/林业',
    									'url': 'http://category.dangdang.com/cp01.66.00.00.00.00.html'
    								}
    							]
    						}
    					]
    				},
    				methods: {
    				}
    			})
    			
    			const navBtn = document.getElementById('nav-btn');
    			const nav = document.getElementById('nav');
    			var status = 0;//当前隐藏还是显示状态,默认隐藏
    			//淡入
    			function  fedeIn(opc,elem)//opc: opcity当前值,elem: 当前动画对象
    			{	
    				elem.style.opacity = 0;				
    				elem.style.display = 'block';
    				var upInterval = setInterval(function(){
    					opc += 0.05;
    					elem.style.opacity = opc;
    					if(opc>=1)
    					{
    						clearInterval(upInterval);
    					}
    				},50);
    			}
    			//淡出
    			function  fedeOut(opc,elem)//opc: opcity当前值,elem: 当前动画对象
    			{			
    				elem.style.opacity = 1;
    				var downInterval = setInterval(function(){
    					opc -= 0.05;
    					elem.style.opacity = opc;
    					if(opc<=0)
    					{
    						clearInterval(downInterval);
    						elem.style.display = 'none';
    					}
    				},50);
    			}
    			navBtn.onclick = function(){
    				if(status==0)
    				{					
    					status=1;
    					fedeIn(0,nav);
    					
    				}else{
    					status=0;
    					fedeOut(1,nav)
    				}
    			}
    			
    			window.onresize =function(){//窗口缩放触发事件
    				var width = document.body.clientWidth//获取屏幕宽度
    				if(width>=768)
    				{
    					nav.style.display = 'flex';
    					nav.style.opacity = 1;
    				}else{
    					nav.style.display = 'none';
    					status=0;
    				}
    			}
    		</script>
    	</body>
    </html>
    
    

    效果展示:
    1.pc端
    在这里插入图片描述
    2.移动端:
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    展开全文
  • 如果您曾经在响应式网站上工作,那么毫无疑问... 在这种响应式导航方法中,我们将使用一种可以使用媒体查询和jQuery容纳大型多层导航菜单的方法,同时尝试使我们的标记简单而外部资源最少。 寻找快速解决方案? 如...

    响应式多级菜单 侧边菜单栏

    如果您曾经在响应式网站上工作,那么毫无疑问,您必须解决这个新兴领域中最棘手的问题之一:导航。 对于简单的导航,解决方案可以很简单。 但是,如果您要处理的事情比较复杂,可能有多个嵌套列表和下拉列表,则可能需要进行更戏剧性的重排。

    在这种响应式导航方法中,我们将使用一种可以使用媒体查询和jQuery容纳大型多级导航菜单的方法,同时尝试使我们的标记简单而我们的外部资源最少。

    寻找快速解决方案?

    如果您正在寻找一种快速的解决方案,那么Envato Market上有许多CSS导航菜单和样式集。

    这个CSS3 Mega下拉菜单特别好用-它仅依赖CSS / XHTML,并具有完全有效的联系表以及对启动具有完全响应的能力。 包括三个主要变体:水平,垂直对齐在左侧和垂直对齐在右侧。

    您也可以与Envato Studio上的专家提供商之一合作

    目标:响应式下拉菜单

    这是我们的目标:

    • 在较大的屏幕上,显示一个水平下拉菜单,当父元素悬停在上方时,最多显示2级子菜单。
    • 在较小的屏幕上,有一个“菜单”按钮,可垂直显示我们的菜单,在单击/触摸父元素时显示子菜单。

    步骤1:标记

    我们的标记是一个相当简单的无序列表,嵌套列表包含在列表项中。 我故意在父元素无序列表上不使用任何类或ID,以便该菜单与CMS生成的菜单兼容。

    <div class="container">
    	
    <a class="toggleMenu" href="#">Menu</a>
    <ul class="nav">
    	<li  class="test">
    		<a href="#">Shoes</a>
    		<ul>
    			<li>
    				<a href="#">Womens</a>
    				<ul>
    					<li><a href="#">Sandals</a></li>
    					<li><a href="#">Sneakers</a></li>
    					<li><a href="#">Wedges</a></li>
    					<li><a href="#">Heels</a></li>
    					<li><a href="#">Loafers</a></li>
    					<li><a href="#">Flats</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">Mens</a>
    				<ul>
    					<li><a href="#">Loafers</a></li>
    					<li><a href="#">Sneakers</a></li>
    					<li><a href="#">Formal</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>

    步骤2:基本样式

    让我们添加一些非常基本的样式,使我们的列表看起来像一个导航栏:

    body, nav, ul, li, a  {margin: 0; padding: 0;}
    body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    a {text-decoration: none;}
    .container {
        width: 90%;
        max-width: 900px;
        margin: 10px auto;
    }
    .toggleMenu {
        display:  none;
        background: #666;
        padding: 10px 15px;
        color: #fff;
    }
    .nav {
        list-style: none;
         *zoom: 1;
         background:#175e4c;
         position: relative;
    }
    .nav:before,
    .nav:after {
        content: " "; 
        display: table; 
    }
    .nav:after {
        clear: both;
    }
    .nav ul {
        list-style: none;
        width: 9em;
    }
    .nav a {
        padding: 10px 15px;
        color:#fff;
        *zoom: 1;
    }
    .nav > li {
        float: left;
        border-top: 1px solid #104336;
        z-index: 200;
    }
    .nav > li > a {
        display: block;
    }
    .nav li ul {
        position: absolute;
        left: -9999px;
        z-index: 100;
    }
    .nav li li a {
        display: block;
        background: #1d7a62;
        position: relative;
        z-index:100;
        border-top: 1px solid #175e4c;
    }
    .nav li li li a {
        background:#249578;
        z-index:200;
        border-top: 1px solid #1d7a62;
    }

    我们刚刚将列表项浮动到一条水平线上,设置了一些颜色,并使用绝对定位将子菜单隐藏在屏幕之外。 如果您对第20行感到疑惑,那么这是一种简单的clearfix方法,我发现它在这种情况下有效(请参阅Nicolas Gallagher的博客上的更多信息 )。

    第3步:水平下拉菜单

    接下来,让我们进行水平下拉菜单。 尽管可以使用纯CSS使用:hover伪选择器来完成此操作,但是我将使用JavaScript将其添加进来,因为我们将要切换菜单以在小屏幕版本中单击激活。

    由于我们使用绝对定位将子菜单移出屏幕,因此我们添加一些.hover规则,当存在.hover类时,这些规则将相对于其父项定位子菜单(我们将使用jQuery来解决)。

    .nav li {
        position: relative;
    }
    .nav > li.hover > ul {
        left: 0;
    }
    .nav li li.hover ul {
        left: 100%;
        top: 0;
    }

    现在,我们将添加几行简单的jQuery,以将.hover类添加到将元素悬停在列表元素上时。

    $(document).ready(function() {
    	$(".toggleMenu").css("display", "none");
    	$(".nav li").hover(function() {
    	 	$(this).addClass('hover');
    	}, function() {
    		$(this).removeClass('hover');
    	});
    });

    这样,我们就有了一个功能齐全的多层下拉菜单。

    步骤4:垂直下拉式选单

    不幸的是,我们可爱的水平下拉菜单在移动屏幕上看起来很小,所以让我们确保通过添加viewport meta标签来在移动浏览器加载页面时将其完全放大。

    <meta name="viewport" content="width=device-width, initial-scale=1">

    当然,现在我们的下拉菜单在移动设备上看起来更糟,并且大多数甚至都无法显示在屏幕上! 让我们添加一些媒体查询,以将列表样式设置为断点下方的垂直列表。 我们的断点由菜单分成两行的点确定,在我的情况下,大约为800px。

    在断点处,我们将删除浮点数,并将列表项和无序列表设置为width: 100% 。 现在,当我们将鼠标悬停在父项上时,其子项列表将显示在其下项的顶部。 我们宁愿其他顶级列表项被取代。 因此,我们将position值设置为static ,而不是更改无序列表的left位置。

    @media screen and (max-width: 800px) {
        .nav > li {
            float: none;
        }
        .nav ul {
            display: block;
            width: 100%;
        }
       .nav > li.hover > ul , .nav li li.hover ul {
            position: static;
        }
    }

    步骤5:将悬停转换为Click

    由于您还不能将鼠标悬停在触摸屏上,因此,我们将创建一些条件代码来检查窗口的宽度,然后编写代码来设置click()hover()事件。

    $(document).ready(function() {
    	var ww = document.body.clientWidth;
    	if (ww < 800) {
    		$(".toggleMenu").css("display", "inline-block");
    		$(".nav li a").click(function() {
    			$(this).parent("li").toggleClass('hover');
    		});
    	} else {
    		$(".toggleMenu").css("display", "none");
    		$(".nav li").hover(function() {
    			$(this).addClass('hover');
    		}, function() {
    			$(this).removeClass('hover');
    		});
    	}
    });

    对于click事件,我们必须将目标元素从列表项更改为父项,因为列表是嵌套的,单击一个列表项也可以打开其子项。 但是,此更改的问题在于,单击锚标记将重新加载页面,但是我们不能阻止所有作为列表项后代的锚标记的默认行为。

    为了解决这个问题,让我们添加一小段jQuery以将.parent.parent到其子锚具有同级的任何列表项中,然后仅将这些锚定为目标(再次尝试保持标记的灵活性)。

    $(".nav li a").each(function() {
    		if ($(this).next().length > 0) {
    			$(this).addClass("parent");
    		};
    	})
    	if (ww < 800) {
    		$(".toggleMenu").css("display", "inline-block");
    		$(".nav li a.parent").click(function(e) {
    			e.preventDefault();
    		 	$(this).parent("li").toggleClass('hover');
    		});
    	} else {
    ... }

    第6步:切换菜单

    现在,我们的菜单在移动设备上看起来非常漂亮,但它占用了大量宝贵的屏幕空间。 一种流行的新方法是使用按钮切换导航列表,通常使用单词“ Menu”或菜单图标。 让我们的切换链接起作用,以便仅在单击时显示导航列表。

    $(".toggleMenu").click(function(e) {
    	e.preventDefault();
    	$(".nav").toggle();
    });
    
    if (ww < 800) {
    	$(".toggleMenu").css("display", "inline-block");
    	$(".nav").hide();
    } else {
    	...
    }

    步骤7:更多样式

    由于我们现在有了以类为目标的父级列表项,为什么不添加一点向下箭头以让我们的用户知道哪些列表项中有子级?

    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    @media screen and (max-width: 800px) {
     .nav > li > .parent {
            background-position: 95% 50%;
        }
        .nav li li .parent {
            background-image: url("images/downArrow.png");
            background-repeat: no-repeat;
            background-position: 95% 50%;
        }
    }

    奖金:炫耀

    现在,出于实际目的,此菜单效果很好。 如果在移动浏览器中打开它,将会得到一个非常有用的垂直手风琴列表,如果在桌面浏览器中打开它,则会得到一个漂亮的水平下拉列表。 但是,如果将桌面浏览器的大小调整为移动宽度,我们的导航仍然只能在悬停时使用,并且菜单不会通过切换功能隐藏。 对于大多数应用程序,这很好。 毕竟,您的普通网站访问者不会抓住他们浏览器的边缘,而是开始疯狂地来回拖动。

    但是,如果您想给您的网络专业人员留下深刻的印象,那是行不通的。 我们需要设置脚本以响应resize事件,并在将浏览器的大小调整到断点以下时执行条件代码。 扩展出色的“ 创建移动优先响应式设计”教程中演示的代码,我们将设置一些变量来跟踪和更新我们的浏览器宽度。

    步骤8:窗口事件

    因为我们要在页面加载调整浏览器大小时都检查浏览器的宽度,所以让我们开始将所有条件代码移出$(document).ready()事件并将其包装在功能adjustMenu

    var ww = document.body.clientWidth;
    $(document).ready(function() {
    	$(".toggleMenu").click(function(e) {
    		e.preventDefault();
    		$(".nav").toggle();
    	});
    	$(".nav li a").each(function() {
    		if ($(this).next().length > 0) {
    			$(this).addClass("parent");
    		};
    	})
    	adjustMenu();
    });
    function adjustMenu() {
    	if (ww < 800) {
    		$(".toggleMenu").css("display", "inline-block");
    		$(".nav").hide();
    		$(".nav li a.parent").click(function(e) {
    			e.preventDefault();
    		 	$(this).parent("li").toggleClass('hover');
    		});
    	} else {
    		$(".toggleMenu").css("display", "none");
    		$(".nav li").hover(function() {
    		 		$(this).addClass('hover');
    			}, function() {
    				$(this).removeClass('hover');
    		});
    	}
    }

    要在调整浏览器大小时调用该函数,我们将其bind到窗口事件resizeorientationchange 。 在此事件内,我们将重新定义ww变量以适应浏览器的新宽度。

    $(window).bind('resize orientationchange', function() {
    	ww = document.body.clientWidth;
    	adjustMenu();
    });

    在这一点上,我们引入了更多的问题:尽管起初看起来是可行的(水平菜单折叠到打开菜单的“菜单”按钮中),但很快可以看出我们有两个大问题:

    1. 如果我们重新调整移动宽度窗口的大小,使其超出断点,则整个菜单将消失。
    2. 悬停事件仍在移动版本上触发。

    步骤9:显示和隐藏

    我们缺少的导航菜单似乎很容易解决:只需在大于断点的条件下添加$("nav").show() 。 该解决方案似乎有效,但是带来了一些棘手的情况。 由于每次更改浏览器大小时都会重新评估代码,因此只要我们在打开菜单的情况下调整大小,它就会自动再次关闭。

    这似乎不太可能出现,但移动浏览器却很奇怪:例如,在我的Galaxy S上,向下滚动然后返回到页面顶部会触发resize事件。 不好!

    要解决此问题,我们需要采取某种方法来检查是否已单击菜单切换。 我将在菜单切换按钮上使用一个添加的类,因为它可以方便地进行样式设置(也许我们稍后需要向下箭头吗?)除了切换导航菜单的显示之外,菜单切换按钮现在将切换其自己的.active类。 返回到比断点窄的条件,让我们更新代码以仅在菜单切换项没有.active情况下隐藏导航菜单。

    $(document).ready(function() {
    	$(".toggleMenu").click(function(e) {
    		e.preventDefault();
    		$(this).toggleClass("active");
    		$(".nav").toggle();
    	});
    });
    	if (ww < 800) {
    		$(".toggleMenu").css("display", "inline-block");
    		if (!$(".toggleMenu").hasClass("active")) {
    			$(".nav").hide();
    		} else {
    			$(".nav").show();
    		}
    		$(".nav li a.parent").click(function(e) {
    			e.preventDefault();
    		 	$(this).parent("li").toggleClass('hover');
    		});
    	} ...

    步骤10解除悬停事件的绑定

    要解决我们的移动大小导航菜单对悬停事件做出响应的问题,我们只需要在比断点更窄的条件内将列表中的悬停事件unbind()

    $(".nav li").unbind('mouseenter mouseleave');

    但是,这带来了一个新问题:如果您将浏览器的大小从小调整到小,我们的click事件将不起作用。 一些调试显示, click事件已绑定到链接很多次,因此,一旦单击,将打开.hover类,然后立即将其再次关闭。 发生这种情况是因为在调整窗口大小时,整个函数反复触发。 为了确保我们从正确的位置开始切换,我们需要先unbind click事件,然后再重新绑定它。

    但是,一旦将浏览器的大小重新设置为从小到大,我们现在就缺少了hover事件,因为我们是在浏览器较小时取消绑定它的,而click事件仍然存在,因此在绑定悬停语句之前也请取消绑定。 我们还将删除带有.hover类的所有列表项,然后再将它们添加到hover事件中,以防止菜单随着扩展浏览器而尴尬地保持打开状态。

    为了清楚起见,我正在使用.bind()重写.hover() .click().hover()事件。 这意味着同样的事情。

    if (ww < 800) {
    	$(".toggleMenu").css("display", "inline-block");
    	if (!$(".toggleMenu").hasClass("active")) {
    		$(".nav").hide();
    	} else {
    		$(".nav").show();
    	}
    	$(".nav li").unbind('mouseenter mouseleave');
    	$(".nav li a.parent").unbind("click").bind("click", function(e){
    		e.preventDefault();
    	 	$(this).parent("li").toggleClass('hover');
    	});
    } else {
    	$(".toggleMenu").css("display", "none");
    	$(".nav").show();
                $(".nav li").removeClass("hover");
    	$(".nav li a").unbind("click");
    	$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
    		$(this).toggleClass('hover');
    	});
    }

    万岁! 一切似乎都应该起作用。

    步骤11:让IE表现良好

    如果IE7没有出现崩溃,那将不是聚会,是吗? 我们这里有一个奇怪的错误,当子菜单显示在其他内容上时(在我们的示例中是一些lorem ipsum文本),子菜单消失了。 光标到达段落元素后,*不再*菜单。 我相当确定这是由于IE7处理position: relative;的方式有些奇怪position: relative; ,通过在.nav a元素上触发hasLayout可以轻松解决此问题。

    .nav a {
        *zoom: 1;
    }

    进一步考虑

    与往常一样,您必须对浏览器和功能支持做出自己的判断,但是诸如Modernizrresponse.js之类的工具可能会因支持较旧的浏览器而有些痛苦。

    我已经在Mobile Safari和我可以接触到的每个Android 2.3浏览器上测试了此菜单,它似乎运行得很好。 但是,此技术非常依赖JavaScript,并且由于某些移动浏览器(通常为Blackberry)对JavaScript的支持非常差,因此我们可能会给某些用户留下无法使用的导航菜单。

    幸运的是,有许多方法可用于为无JavaScript的设备提供简化的布局。 可以想到将老式的.no-js类添加到body标签,然后将其从JavaScript中删除的一种很好的老式技术,但是您也可以只为顶级导航项提供href属性,将用户引导至常规“例如“鞋子”类别列表,并依靠preventDefault来阻止启用JavaScript的设备中的此行为。

    当然,媒体查询在旧版本的IE中将不起作用,因此您必须确定是否值得添加诸如fill.fill这样的polyfill来填补这一空白。

    最后但并非最不重要的一点是,有一个令人讨厌的iOS错误,导致您在旋转设备时更改缩放级别。 请查看iOS Orientationchange Fix脚本解决此错误。

    进一步阅读

    尽管此技术可能非常适合某些情况和菜单结构,但仍有许多其他选项可用于在移动设备上控制导航。 例如:

    随意阅读,克隆或分叉GitHub repo ,并感谢您的阅读!

    翻译自: https://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452

    响应式多级菜单 侧边菜单栏

    展开全文
  • 简单实用的响应式菜单滚动列表插件scrollmenu,拥有:列表样式、九宫格样式、长按左键拖动或触屏滑动样式、带右侧图标无分割线样式四种,同时还兼容PC和移动端,菜单样式和图标等均可自行调整,真的好强大啊。
  • 这是一个HTML5+CSS3实现的响应式二级导航菜单,资源来源于网络,侵删
  • 导航响应式布局

    2020-04-22 17:58:24
    知识点:css3媒体查询表达式,rem单位 html代码 <ul> <li> <a href="#">推荐</a> </li> <li> <a href="#">热点新闻</a> <...影...
  • html5简洁的响应式顶部固定导航菜单特效 html5简洁的响应式顶部固定导航菜单特效 html5简洁的响应式顶部固定导航菜单特效 html5简洁的响应式顶部固定导航菜单特效
  • Bootstrap响应式侧边栏导航菜单代码是一款基于jquery+html5实现的同时兼容手机与电脑端响应式导航菜单特效,手机触屏滑动导航菜单特效。
  • 目前响应试web页面已经逐渐开始盛行,除了将页面的内容以及布局结构实现响应试以外,剩下的重点就是实现导航的响应试,当然...当鼠标经过导航时就会平滑拉菜单,不仅如此该响应式导航在手机屏幕和ie浏览器中...
  • 继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1) .环境配置 2) .提取页面 3).动态生成菜单(无限级别树)  2.系统环境配置  项目需要程序数据支撑,这里...
  • CSS:响应式的导航菜单

    千次阅读 2013-11-08 00:57:32
    最近我写了一点资料关于怎样制作一个响应式的移动导航,现在我发现了一个新的技术(有关HTML5)可以在没有使用Javascript的情况下做一个响应式菜单。这个菜单可以自动排列到左边、中间或者右边)。不像之前的教程...
  • 简单实用的jQuery响应式网站导航菜单栏代码,自适应不同浏览器宽度,是一款电脑和手机移动端通用的导航栏代码。
  • 用CSS3设计响应式导航菜单

    千次阅读 2017-09-14 13:40:21
    现在我发现了一种新的方式,可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记,而且菜单可以居左、居中和居右对齐。不像前面一个教程中需要点击来展开,这个菜单可以在hover时展开,对用户...
  • 一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码,Bootstrap自适应电脑手机端导航下拉菜单网页特效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,074
精华内容 8,829
关键字:

响应式菜单栏

友情链接: IIC.zip