精华内容
下载资源
问答
  • bootstrap库能够很方便的实现PC和移动上的响应式操作。 jQuery库大大的简化了脚本的开发; html: <html> <body> <div class='main_content'> <div class='nav_list'> {include ...

    bootstrap库能够很方便的实现PC和移动上的响应式操作。 

    jQuery库大大的简化了脚本的开发;

    html:

    <html>
    <body>
    <div class='main_content'>
    	<div class='nav_list'>
    		{include file="admin@public/nav"}
    		<a href="#" class="js-yw-nav-toggle yw-nav-toggle"><i></i></a>			<!-- fixed  left bottom -->
    	</div>
    	<div class='manager_content '>
    		{block name="content"}{/block}	
    	</div>
    </div>
    </body>
    </html>

    css:

    .yw-nav-toggle i::before, .yw-nav-toggle i::after {
    	content: '';
    	width: 30px;
    	height: 2px;
    	background: #000;
    	position: absolute;
    	left: 0;
    	-webkit-transition: 0.2s;
    	-o-transition: 0.2s;
    	transition: 0.2s;
    }
    
    .yw-nav-toggle i::before {
    	top: -7px;
    }
    
    .yw-nav-toggle i::after {
    	bottom: -7px;
    }
    
    .yw-nav-toggle:hover i::before {
    	top: -10px;
    }
    
    .yw-nav-toggle:hover i::after {
    	bottom: -10px;
    }
    
    .yw-nav-toggle:active i::before {
    	top: 0px;
    	-webkit-transform: rotateZ(45deg);
    	-moz-transform: rotateZ(45deg);
    	-ms-transform: rotateZ(45deg);
    	-o-transform: rotateZ(45deg);
    	transform: rotateZ(45deg);
    }
    
    .yw-nav-toggle:active i::after {
    	bottom: 0px;
    	-webkit-transform: rotateZ(-45deg);
    	-moz-transform: rotateZ(-45deg);
    	-ms-transform: rotateZ(-45deg);
    	-o-transform: rotateZ(-45deg);
    	transform: rotateZ(-45deg);
    }
    
    .nav_list {
    	position: fixed;
    	width: 150px;
    	border: 1px solid #0d5c57;
    	margin-left: 2px;
    	margin-top: 10px;
    	-moz-transform: translateX(0px);
    	-webkit-transform: translateX(0px);
    	-ms-transform: translateX(0px);
    	-o-transform: translateX(0px);
    	transform: translateX(0px);
    	-moz-transform: translateX(0px);
    	-webkit-transition: 0.5s;
    	-o-transition: 0.5s;
    	transition: 0.5s;
    }
    
    @media screen and (max-width: 768px) {
    	.yw-nav-toggle {
    		opacity: 1;
    		visibility: visible;
    	}
    	.nav_list {
    		width: 150px;
    		-moz-transform: translateX(-150px);
    		-webkit-transform: translateX(-150px);
    		-ms-transform: translateX(-150px);
    		-o-transform: translateX(-150px);
    		transform: translateX(-150px);
    		-moz-transform: translateX(-150px);
    	}
    }
    
    
    body.nav_offscreen .nav_list{
    	width: 150px;
    	-moz-transform: translateX(0px);
    	-webkit-transform: translateX(0px);
    	-ms-transform: translateX(0px);
    	-o-transform: translateX(0px);
    	transform: translateX(0px);
    }
    

    jQuery:

    //click;
    	var nav_off = function() {
    		$('.js-yw-nav-toggle').on('click', function(event) {
    			event.preventDefault();
    			var $this = $(this);
    
    			if ($("body").hasClass("nav_offscreen")) {
    				$("body").removeClass("nav_offscreen");
    				$this.removeClass("active");
    			} else {
    				$("body").addClass("nav_offscreen");
    				$this.addClass("active");
    			}
    
    		});
    		
    		$(Window).scroll(function(){			
    			if ($("body").hasClass("nav_offscreen")) {
    				$("body").removeClass("nav_offscreen");
    				$(".js-yw-nav-toggle").removeClass("active");
    			} 
    		});
    	}
    	
    
    
    	var menuOutClick = function() {
    		$(document).click(
    				function(e) {
    					var container = $(".nav_list, .js-yw-nav-toggle");
    					if (!container.is(e.target)
    							&& container.has(e.target).length === 0) {
    						if ($("body").hasClass("nav_offscreen")) {
    							$("body").removeClass("nav_offscreen");
    							$(".js-yw-nav-toggle").removeClass("active");
    						}
    					}
    				});
    	}
    

      

    转载于:https://www.cnblogs.com/yinwei-space/p/10545986.html

    展开全文
  • jquery导航栏响应式菜单示例。需要的自己下载
  • 创建响应式下拉菜单是一项棘手的任务。 在设计和开发阶段,您必须做出许多决定。 推荐的解决方案通常取决于您正在构建的网站或应用程序的特征。 但是,对于所有类型的响应下拉菜单,也推荐一些常规最佳实践。 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

    响应式下拉菜单栏

    展开全文
  • 响应式菜单

    2017-10-27 17:56:37
    因公司近期需用到响应式菜单栏,临时做了一个,PC端左侧菜单栏通过css实现,其中移动端有用到jquery.meanmenu.js插件。可能没那么完美,但是基本也勉强够用了,有些功能或者样式可以自己调整。仅供大家和自己参考,...

    因公司近期需用到响应式菜单栏,临时做了一个,PC端左侧菜单栏通过css实现,其中移动端有用到jquery.meanmenu.js插件。可能没那么完美,但是基本也勉强够用了,有些功能或者样式可以自己调整。留个记录,仅供大家参考哈!

    HTML内容部分:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>下拉菜单兼容PC和移动端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="css/slide-menu.css" />
    </head>
    <body>
    <div class="menu_container">
    <!--pc menu code-->
    <div class="hc_lnav">
    <div class="allbtn">
    <h2><a href="#"><strong>&nbsp;</strong>Shop by Departments<i>&nbsp;</i></a></h2>
    <ul class="jspop">
    <li>
    <dl>
    <dd>
    <a href="#">Electronics</a>
    </dd>
    </dl>
    <div class="pop">
    <h3 class="pop_h3"><a href="#">Electronics Buying Guide</a></h3>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">Audio Media Players</a></dt>
    <dd>
    <a href="">Microphone</a>
    <a href="">Headset</a>
    <a href="">Walkie Talkie</a>
    <a href="">Bluetooth Speaker</a>
    <a href="">Voice Recorders, Dictaphones</a>
    <a href="">MP3 & MP4 Players</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Audio Media Players</a></dt>
    <dd>
    <a href="">Microphone</a>
    <a href="">Headset</a>
    <a href="">Walkie Talkie</a>
    <a href="">Bluetooth Speaker</a>
    <a href="">Voice Recorders, Dictaphones</a>
    <a href="">MP3 & MP4 Players</a>
    </dd>
    </dl>
    </div>


    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">Audio Media Players</a></dt>
    <dd>
    <a href="">Microphone</a>
    <a href="">Headset</a>
    <a href="">Walkie Talkie</a>
    <a href="">Bluetooth Speaker</a>
    <a href="">Voice Recorders, Dictaphones</a>
    <a href="">MP3 & MP4 Players</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Audio Media Players</a></dt>
    <dd>
    <a href="">Microphone</a>
    <a href="">Headset</a>
    <a href="">Walkie Talkie</a>
    <a href="">Bluetooth Speaker</a>
    <a href="">Voice Recorders, Dictaphones</a>
    <a href="">MP3 & MP4 Players</a>
    </dd>
    </dl>
    </div>


    <div class="act">
    <a href=""><img src="" /></a>
    </div>
    </div>
    </li>


    <li>
    <dl>
    <dd>
    <a href="#">Cell Phones & Accessories</a>
    </dd>
    </dl>
    <div class="pop">
    <h3 class="pop_h3"><a href="#">Mobile Phone Buying Guide</a></h3>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">Cell Phones</a></dt>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Samsung Accessories</a></dt>
    <dd>
    <a href="">Samsung Cases</a>
    <a href="">Samsung Chargers</a>
    <a href="">Samsung Screen Protector</a>
    <a href="">Earphones for Samsung</a>
    </dd>
    </dl>
    </div>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">iPhone Accessories</a></dt>
    <dd>
    <a href="">iPhone Cases/Covers</a>
    <a href="">iPhone Gadgets</a>
    <a href="">iPhone Screen Protector</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Photography Accessories</a></dt>
    <dd>
    <a href="">Selfie Stick, Mini Tripod</a>
    <a href="">Phone Lens</a>
    </dd>
    </dl>
    </div>
    <div class="act">
    <a href=""><img src="" /></a>
    </div>
    </div>
    </li>
    <li>
    <dl>
    <dd>
    <a href="#">Computer</a>
    </dd>
    </dl>
    <div class="pop">
    <h3 class="pop_h3"><a href="#">Computer Buying Guide</a></h3>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">Laptops & Tablet PCs</a></dt>
    <dd>
    <a href="">Tablet PCs</a>
    <a href="">Laptops</a>
    <a href="">iPad Accessories</a>
    <a href="">Tablet/eBook Accessories</a>
    <a href="">Laptop Power Adapters</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Computer Peripherals</a></dt>
    <dd>
    <a href="">Computer Microphone</a>
    <a href="">Keyboards & Mouse</a>
    <a href="">Computer Headset</a>
    <a href="">Webcams</a>
    <a href="">Remote Controls & Pointers</a>
    <a href="#">USB Lamps</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Computer Components</a></dt>
    <dd>
    <a href="">Computer Microphone</a>
    <a href="">Keyboards & Mouse</a>
    <a href="">Computer Headset</a>
    <a href="">Webcams</a>
    <a href="">Remote Controls & Pointers</a>
    <a href="#">USB Lamps</a>
    <a href="">Remote Controls & Pointers</a>
    <a href="#">USB Lamps</a>
    </dd>
    </dl>
    </div>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">iPhone Accessories</a></dt>
    <dd>
    <a href="">iPhone Cases/Covers</a>
    <a href="">iPhone Gadgets</a>
    <a href="">iPhone Screen Protector</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Photography Accessories</a></dt>
    <dd>
    <a href="">Selfie Stick, Mini Tripod</a>
    <a href="">Phone Lens</a>
    </dd>
    </dl>
    </div>
    <div class="act">
    <a href=""><img src="" /></a>
    </div>
    </div>
    </li>
    <li>
    <dl>
    <dd>
    <a href="#">Cell Phones & Accessories</a>
    </dd>
    </dl>
    <div class="pop">
    <h3 class="pop_h3"><a href="#">Mobile Phone Buying Guide</a></h3>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">Cell Phones</a></dt>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Samsung Accessories</a></dt>
    <dd>
    <a href="">Samsung Cases</a>
    <a href="">Samsung Chargers</a>
    <a href="">Samsung Screen Protector</a>
    <a href="">Earphones for Samsung</a>
    </dd>
    </dl>
    </div>
    <div class="m_content">
    <dl>
    <dt class="small_title"><a href="#">iPhone Accessories</a></dt>
    <dd>
    <a href="">iPhone Cases/Covers</a>
    <a href="">iPhone Gadgets</a>
    <a href="">iPhone Screen Protector</a>
    </dd>
    </dl>
    <dl>
    <dt class="small_title"><a href="#">Photography Accessories</a></dt>
    <dd>
    <a href="">Selfie Stick, Mini Tripod</a>
    <a href="">Phone Lens</a>
    </dd>
    </dl>
    </div>
    <div class="act">
    <a href=""><img src="" /></a>
    </div>
    </div>
    </li>
    </ul>


    </div>


    </div>
    <!-- 移动端代码部分begin -->
    <header>
    <nav>
    <ul>
    <li>
    <a href="#">Free Shipping</a>
    <ul>
    <li>
    <a href="#">Second Level Link</a>
    <ul>
    <li>
    <a href="#">Third Level Link</a>
    </li>
    <li>
    <a href="#">Third Level Link</a>
    </li>
    <li>
    <a href="#">Third Level Link</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Second Level Link</a>
    </li>
    <li>
    <a href="#">Second Level Link</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Deals</a>
    <ul>
    <li>
    <a href="#">Second Level Link</a>
    <ul>
    <li>
    <a href="#">Third Level Link</a>
    </li>
    <li>
    <a href="#">Third Level Link</a>
    </li>
    <li>
    <a href="#">Third Level Link</a>
    <ul>
    <li>
    <a href="#">Fourth Level Link</a>
    </li>
    <li>
    <a href="#">Fourth Level Link</a>
    </li>
    <li>
    <a href="#">Fourth Level Link with extra long name so it wraps</a>
    <ul>
    <li>
    <a href="#">Fifth Level Link</a>
    </li>
    <li>
    <a href="#">Fifth Level Link</a>
    </li>
    <li>
    <a href="#">Fifth Level Link</a>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Second Level Link</a>
    </li>
    <li>
    <a href="#">Second Level Link</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Lifestyle</a>
    </li>
    <li>
    <a href="#">Daily Deals</a>
    </li>
    <li>
    <a href="#">Freebies</a>
    </li>
    <li>
    <a href="#">Top Sellers</a>
    </li>
    <li>
    <a href="#">Newsletter Offer</a>
    </li>
    <li>
    <a href="#">Clearance</a>
    </li>
    <li>
    <a href="#">New Arrival</a>
    </li>
    <li>
    <a href="#">Promos</a>
    </li>
    <li>
    <a href="#">Group Deals</a>
    </li>


    <!--pc多级菜单在移动端显示部分-->
    <div class="m-menu-show">
    <li>
    <a href="#">Kids</a>
    <ul>
    <li>
    <a href="#">Sports Kids</a>
    <ul>
    <li>
    <a href="#">All</a>
    </li>
    <li>
    <a href="#">Scooters, Skateboard</a>
    <ul>
    <li>
    <a href="#">All</a>
    </li>
    <li>
    <a href="#">Roller Blade</a>
    </li>
    <li>
    <a href="#">Roller Skate</a>
    </li>
    <li>
    <a href="#">Skateboard</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Bikes</a>
    <li>
    <a href="#">Kids Swings</a>
    </li>
    <li>
    <a href="#">Archery & Target Stand</a>
    </li>
    <li>
    <a href="#">Boxing Kids</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Kids Toys</a>
    </li>
    <li>
    <a href="#">Kids Clothing</a>
    </li>
    <li>
    <a href="#">Kids' Watches</a>
    </li>
    <li>
    <a href="#">Kids Shoes</a>
    </li>
    </ul>
    </li>
    </div>


    </ul>
    </nav>
    </header>


    </div>
    <!--遮罩层-->
    <div class="shade"></div>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.meanmenu.js"></script>
    <script>
    jQuery(document).ready(function() {
    jQuery('header nav').meanmenu();
    });
    document.getElementsByClassName("hc_lnav")[0].onmouseover = function() {
    document.getElementsByClassName("shade")[0].style.display = "block";
    }
    document.getElementsByClassName("hc_lnav")[0].onmouseleave = function() {
    document.getElementsByClassName("shade")[0].style.display = "none";
    }
    </script>
    <!-- 代码部分end -->
    </body>
    </html>

    CSS部分:

    @charset "utf-8";
    *{margin:0;padding:0;list-style-type:none;}
    html,body{line-height:2em;background-color:#ffffff;font-family:arial, helvetica, sans-serif;color:#666666;font-size:12px;position: relative;width: 100%;height: 100%;overflow: hidden;}
    a {color: #333;text-decoration: none;}
    a:hover{color:#f77564;text-decoration:underline}


    /*pc菜单样式*/ 
    .hc_lnav{z-index:9999;position:relative;display: inline-block;float: left;width: 13%;z-index: 1;}
    .hc_lnav .allbtn .jspop{width: 100%;}
    .hc_lnav .allbtn h2{font-size:14px;box-shadow:2px 0px 6px -3px #428000;-webkit-box-shadow:2px 0px 6px -3px #428000;-moz-box-shadow:2px 0px 6px -3px #428000;margin: 0;}
    .hc_lnav .allbtn h2 a{height:52px;line-height:52px;background-color:#358000;padding-left:10px;display:block;font-family:微软雅黑, 黑体;color:#ffffff;font-size:14px;font-weight:normal}
    .hc_lnav .allbtn h2 a:hover{background-color:#358000;text-decoration:none}
    .hc_lnav .allbtn ul{z-index:99999;position:absolute;background-color:#60a411;width:190px;display:none;height:486px;top:52px;left:0px;-webkit-padding-start: 0;}
    .hc_lnav .allbtn ul li{padding-bottom:7px;zoom:1;clear:both;cursor:default;height: 30px;}
    .hc_lnav .allbtn ul li dl{padding-top:4px}
    .hc_lnav .allbtn ul li dl a {
    line-height: 25px;
    white-space: nowrap;
    float: left;
    color: #fff;
    margin-left: 15px;
    margin-right: 6px;
    -webkit-transition: color 0.1s ease-out 0s;
    -moz-transition: color 0.1s ease-out 0s;
    -ms-transition: color 0.1s ease-out 0s;
    -o-transition: color 0.1s ease-out 0s;
    transition: color 0.1s ease-out 0s
    }
    .hc_lnav .allbtn ul li dt{padding-left:10px;float:left;padding-top:1px}
    .hc_lnav .allbtn ul li dd{line-height:22px;float:left;padding-top:2px}
    .hc_lnav .allbtn ul li .pop{border-bottom:#599900 2px solid;position:absolute;left:100%;border-left:medium none;padding-bottom:10px;background-color:#fcfcfc;min-height:408px;padding-left:30px;width:750px;max-width:750px;padding-right:30px;display:none;border-top:medium none;top:0px;border-right:#599900 2px solid;padding-top:10px;box-shadow:4px 4px 5px -1px #999999;-webkit-box-shadow:4px 4px 5px -1px #999999;-moz-box-shadow:4px 4px 5px -1px #999999}
    .hc_lnav .allbtn ul li:hover .pop{display:block;top:0px;}
    .hc_lnav .allbtn ul li .pop h3{font-size: 20px;color: red;width: 100%;display: block;}
    .hc_lnav .allbtn ul li .pop .m_content{width: 33.3%;display: inline-block; float: left;}
    .hc_lnav .allbtn ul li .pop dl{padding: 6px 10px;float: left;}
    .hc_lnav .allbtn ul li .pop dl a{color:#666666;display: block;width: 100%;margin-left: 6px;}
    .hc_lnav .allbtn ul li .pop dt{padding-left:0px;}
    .hc_lnav .allbtn ul li .pop .small_title{font-weight: bold;font-size: 13px;margin-left: -12px;}
    .hc_lnav .allbtn ul li .pop dd{margin-left:-12px}
    .hc_lnav .allbtn ul li .pop .act{position: absolute;right: 0;top: 0;}
    .hc_lnav .allbtn:hover ul{display:block;}
    .hc_lnav .allbtn ul li:hover{background-color:#fcfcfc}


    .hc_lnav .allbtn ul li:hover dl{color:#6e6e6e}
    .hc_lnav .allbtn ul li:hover a{color:#666666}
    .hc_lnav .allbtn ul li:hover a:hover{color:#cd0606}
    .shade{
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display:none;
        background-color: #000;
        -ms-filter: opacity(0.6);
        filter: alpha(opacity=60);
        -webkit-opacity: .6;
        -moz-opacity: .6;
        -o-opacity: .6;
        opacity: .6;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 0;
        }


    /*移动端菜单样式*/    
    .menu_container h1 {font-size: 28px;font-weight: 100;text-align: center;}
    .menu_container header nav {text-align: center;background: #efefef;}
    .menu_container header nav ul {margin: 0;padding: 1em;list-style-type: none;}
    .menu_container header nav ul li {display: inline;margin-left: 3em;}
    .menu_container header nav ul li:first-child {margin-left: 0;}
    .menu_container header nav ul li ul {display: none;}
    .menu_container section, article, header {display: block;float: left;font-size: 14px;width: 87%;position: relative;z-index: 1;}
    .menu_container article {width: 96%;padding: 3em 2%;}
    /*a.meanmenu-reveal {display:none}*/
    .mean-container .mean-bar {float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}
    .mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700
    }
    .mean-container a.meanmenu-reveal span {display:block;background:#fff;height:3px;margin-top:3px}
    .mean-container .mean-nav {float:left;width:100%;background:#0c1923;margin-top:44px}
    .mean-container .mean-nav ul {padding:0;margin:0;width:100%;list-style-type:none}
    .mean-container .mean-nav ul li {position:relative;float:left;width:100%}
    .mean-container .mean-nav ul li a {
    display: block;
    float: left;
    width: 90%;
    padding: 1em 5%;
    margin: 0;
    text-align: left;
    color: #fff;
    border-top: 1px solid #383838;
    border-top: 1px solid rgba(255, 255, 255, .5);
    text-decoration: none;
    text-transform: uppercase
    }


    .mean-container .mean-nav ul li li a {
    width: 80%;
    padding: 1em 10%;
    border-top: 1px solid #f1f1f1;
    border-top: 1px solid rgba(255, 255, 255, .25);
    opacity: .75;
    filter: alpha(opacity=75);
    text-shadow: none!important;
    visibility: visible
    }
    .mean-container .mean-nav ul li.mean-last a {border-bottom:0;margin-bottom:0}
    .mean-container .mean-nav ul li li li a {width:70%;padding:1em 15%;}
    .mean-container .mean-nav ul li li li li a {width:60%;padding:1em 20%}
    .mean-container .mean-nav ul li li li li li a {width:50%;padding:1em 25%}
    .mean-container .mean-nav ul li a:hover {background:#252525;background:rgba(255, 255, 255, .1)}
    .mean-container .mean-nav ul li a.mean-expand {
    margin-top:1px;
    width:26px;
    height:24px;
    padding:12px!important;
    text-align:center;
    position:absolute;
    right:0;
    top:0;
    z-index:2;
    font-weight:700;
    background:rgba(255, 255, 255, .1);
    border:0!important;
    border-left:1px solid rgba(255, 255, 255, .4)!important;
    border-bottom:1px solid rgba(255, 255, 255, .2)!important
    }
    .mean-container .mean-nav ul li a.mean-expand:hover {background:rgba(0, 0, 0, .9)}
    .mean-container .mean-push {float:left;width:100%;padding:0;margin:0;clear:both}
    .mean-nav .wrapper {width:100%;padding:0;margin:0}
    .mean-container .mean-bar, .mean-container .mean-bar * {-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
    .mean-remove {display:none!important}
    .m-menu-show{display: none;}


    /*移动端公用样式*/
    @media only screen and (max-width:780px) {
    html, body{overflow-y: auto;}
    .hc_lnav{display: none;}
    .m-menu-show{display: block;}

    }
    @media only screen and (min-width:781px) and (max-width:1415px){
        .hc_lnav{float: none;width: 22%;}
        .menu_container section, article, header{float: none;width: 100%;z-index: 0;}
    }


    移动端效果:



    pc端效果:


    展开全文
  • jQuery响应式网站导航菜单栏代码,根据浏览器宽度自适应电脑平板和手机移动端浏览。
  • 第四课制作响应式导航栏菜单源码.zip
  • menu-bar:使用香草javascript和CSS构建的响应式菜单导航
  • jquery bootstrap侧边隐藏响应式下拉导航菜单栏
  • 响应式多级菜单 侧边菜单栏 最近,我不得不使用JSF 2.2创建一个响应式多级菜单。 要求:菜单应: 从后端使用动态结构创建 React灵敏,例如对桌面和移动设备友好 有带有导航链接的子菜单项 支持触摸事件 ...

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

    最近,我不得不使用JSF 2.2创建一个响应式多级菜单。 要求:菜单应:

    • 从后端使用动态结构创建
    • React灵敏,例如对桌面和移动设备友好
    • 有带有导航链接的子菜单项
    • 支持触摸事件
    • 支持键盘辅助功能

    PrimeFaces的菜单不是一个选择。 实际上,可以通过模型以编程方式创建它们,但是:

    • 他们没有真正回应
    • 子菜单项只能折叠/展开子菜单,不能包含导航链接

    好吧,为什么不选择任何基于jQuery的响应式多级菜单插件呢? 有很多插件。 请参阅响应式导航和菜单模式的有用列表 我选择了FlexNav

    但是如何输出动态菜单结构呢? ui:repeat在这里不是一个选择,因为该结构(嵌套子菜单等)不是先验的。 幸运的是,OmniFaces带有o:tree ,它可以通过在标记中声明JSF组件或HTML元素来完全控制树层次结构的标记。 o:tree本身不会呈现任何HTML标记。 正是我需要的!

    我最后得到了这个XHTML片段,它混合了o:treeNode,o:treeNodeItem,o:treeInsertChildren和由提到的FlexNav菜单定义HTML元素:

    <h:outputScript library="js" name="jquery.flexnav.js"/>
    <h:outputStylesheet library="css" name="flexnav.css"/>
    
    <ul id="mainnavi" class="flexnav" data-breakpoint="640" role="navigation">
        <o:tree value="#{mainNavigationBean.treeModel}" var="item">
            <o:treeNode level="0">
                <o:treeNodeItem>
                    <li class="item">
                        <a href="#{item.href}" title="#{item.title}">#{item.text}</a>
                        <o:treeInsertChildren/>
                    </li>
                </o:treeNodeItem>
            </o:treeNode>
            <o:treeNode>
                <ul>
                    <o:treeNodeItem>
                        <li>
                            <a href="#{item.href}" title="#{item.title}">#{item.text}</a>
                            <o:treeInsertChildren/>
                        </li>
                    </o:treeNodeItem>
                </ul>
            </o:treeNode>
        </o:tree>
    </ul>
    
    <h:outputScript id="mainnaviScript" target="body">
        $(document).ready(function () {
            $("#mainnavi").flexNav({'calcItemWidths': true});
        });
    </h:outputScript>

    带菜单项的OmniFaces的TreeModel是通过编程创建的。 Java代码如下所示:

    public TreeModel<NavigationItemDTO> getTreeModel() {
        // get menu model from a remote service
        NavigationContainerDTO rootContainer = remoteService.fetchMainNavigation(...);
    
        TreeModel<NavigationItemDTO> treeModel = new ListTreeModel<>();
        buildTreeModel(treeModel, rootContainer.getNavItem());
    
        return treeModel;
    }
    
    private void buildTreeModel(TreeModel<NavigationItemDTO> treeModel, List<NavigationItemDTO> items) {
        for (NavigationItemDTO item : items) {
            buildTreeModel(treeModel.addChild(item), item.getNavItem());
        }
    }

    最终结果(桌面版本):

    响应菜单

    请注意,子菜单是可单击的,并且可以在鼠标悬停时展开。

    您会发现,JSF非常灵活,有时您不需要成熟的组件。 玩得开心!

    翻译自: https://www.javacodegeeks.com/2014/12/building-dynamic-responsive-multi-level-menus-with-plain-html-and-omnifaces.html

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

    展开全文
  • 本资源为HTML左侧菜单栏源代码。动画效果包含鼠标悬浮,菜单拉出等。图标使用了fontawsome。
  • 如果您曾经在响应式网站上工作,那么毫无疑问... 在这种响应式导航方法中,我们将使用一种可以使用媒体查询和jQuery容纳大型多层导航菜单的方法,同时尝试使我们的标记简单而外部资源最少。 寻找快速解决方案? 如...
  • jQuery响应式侧滑二级菜单栏是一款基于jQuery+CSS3+HTML5实现的右侧滑出二级菜单。
  • jQuery响应式侧滑二级菜单栏是一款基于jQuery CSS3 HTML5实现的右侧滑出二级菜单。
  • 主要介绍了Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记,感兴趣的小伙伴们可以参考一下
  • Bootstrap Metronic完完全全响响应应式式管管理理模模板板之之菜菜单单栏栏学学习习笔笔记记 这篇文章主要介绍了Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记感兴趣的小伙伴们可以参考一 继续上一篇针对...
  • 方法一:/*--汉堡菜单代码编程--*/<div class="header"> <nav> <input type="checkbox" id='togglebox' /> //定义一个复选框的input元素,并指定id或name //使用label元素并指定for属性...
  • 响应式导航教程 该响应式导航是有关的。 这些代码都不是我的。 我正在做一系列CSS练习来提高对CSS的了解。 我以前从未做过汉堡菜单。 这是完整大小的页面(特别是导航): 当宽度小于600px时,链接消失,...
  • vux flexbox使用by Charlie Waite... 如何使用Flexbox使用切换菜单构建响应式导航 (How to build a responsive navbar with a toggle menu using Flexbox) During a recent project, my team had to remove all tr...
  • 在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目分享了很多精彩的纯css效果,值得学习。 简单阅读这些css...
  • 响应式开发 纯CSS实现隐藏菜单栏 首先,需要在页头引入相应的CSS文件 1 2 <linkmedia="(min-width: 800px)" rel="stylesheet" href="css/main.css"> <linkmedia="(max-width: 768...
  • 在本教程中,我们将使用html,css和一些javascript构建响应式导航和面包屑菜单。 这就是它的样子, 因此,让我们从HTML开始, <header class="header"> <nav class="navbar"> <a href="#" ...
  • 使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单
  • 响应式导航3. 可折叠导航4. 深色导航5. 顶部固定菜导航6. 导航添加下拉菜单和表单控件7. 小结 1. 概述 在很长的一段时间里,我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点,同时支持PC端...
  • 一、响应式有哪些设计组件/样式组件/样式1.组件2.下拉菜单3.按钮组4.按钮式下拉菜单5.导航条6.分页7.标签与徽章8.排版9.缩略图二、响应式布局方式1、四大布局方式1.固定布局以像素作为页面的基本单位,不管设备屏幕...
  • 这里的“响应式”是指导航的宽度及菜单样式会根据设备的宽度自动调节。 即: 在宽屏状态下导航会扩展到最大宽度。 而在窄屏的时候,导航会将导航条目收纳到一个菜单按钮中。 先看一下最终效...
  • 使用bootstrap制作响应式导航

    万次阅读 2017-07-10 13:09:53
    所谓响应式导航,便是能根据窗体大小适配的导航,以前见着觉得很高级,而现在终于有机会自己写一个了,先上几张效果图。 这是正常屏幕: 这是手机等小屏幕: 点击右边后能够显示出菜单 要实现这个效果,...
  • 继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下1.简介1) .环境配置2) .提取页面3).动态生成菜单(无限级别树)2.系统环境配置项目需要程序数据支撑,这里选择MVC5.0+EF6.0...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 352
精华内容 140
关键字:

响应式菜单栏