我如何制作< nav>幻灯片点击div？ [英] How do i make <nav> slide in on click of div?

问题描述

您好，我需要一些东西，当按下div classbt-menu时，会让nav内容从左侧滑出。当再次点击div或单击导航栏外的任何地方时，它也需要滑回左侧。

主导航栏中有子菜单，正如你在下面的代码中看到的那样，这意味着我需要能够点击类子菜单中的LI，并将其中的列表从其下面滑下。

对不起，我无法弄清楚如何向你展示我的css。

 < header> 
< div class =menu_bar> 
< a href =＃class =bt-menu>< span class =icon-menu>< / span>菜单< / a> 
< / div> 
< nav> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li class =submenu> 
< a href =＃>尼尔森产品< span class =icon-arrow-down2>< / span>< span class =caret>< / span>< ; / A> 
< ul class =children> 
< a>< a href =＃>外部清洁< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>内部清洁< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>气味控制&空气清新剂< / class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>外观完成< / a>< / li>< / span>< / span>< 
< li>< a href =＃>敷料敷料< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>玻璃清洁< span class =icon-dot-single>< / span>< / a>< / li> 
< a>< a href =＃>工作坊维护< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃> Janitorial< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃> TDS& SDS INFO< span class =icon-dot-single>< / span>< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>尼尔森产品目录< / a>< / li> 
< li class =submenu> 
< a href =＃>设备/工具/耗材< span class =icon-arrow-down2>< / span>< span class =caret><跨度>< / A> 
< ul class =children> 
< li>< a href =＃>元素，画笔和设备< / li>< / span>< / span>< / a>< / li> ; 
< li>< a href =＃>工具&设备< span class =icon-dot-single>< / span>< / a>< / li> 
< a>< a href =＃>工作坊耗材< / a>< / li>< / span>< / span& 
< li>< a href =＃> AdBlue< span class =icon-dot-single>< / span>< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>联络我们< / a>< / li> 
< li>< a href =＃>关于我们< / a>< / li> 
< li>< a href =＃>相片库< / a>< / li> 
< / ul> 
< / nav> 
< / header> 
  

希望你可以帮忙，谢谢

解决方案

最简单的方法是：

<$ p $ （）。$（。）。

我编辑代码，你可以检查它是否有效。

< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< header> < div class =menu_bar> < a href =＃class =bt-menu>< span class =icon-menu>< / span>菜单< / a> < / DIV> < NAV> < UL> < li>< a href =＃>主页< / a>< / li> < li class =submenu> < a href =＃>尼尔森产品< span class =icon-arrow-down2>< / span>< span class =caret>< / span>< / a> < ul class =children> < li>< a href =＃>外部清洁< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>内部清洁< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>气味控制&空气清新剂< / class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>外部装饰< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>敷料< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>玻璃清洁< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>工作室维护< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃> Janitorial< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃> TDS& SDS INFO< span class =icon-dot-single>< / span>< / a>< / li> < / UL> < /锂> < li>< a href =＃>尼尔森目录< / a>< / li> < li class =submenu> < a href =＃>设备/工具/消耗品< span class =icon-arrow-down2>< / span>< span class =caret>< / span>< / A> < ul class =children> < li>< a href =＃>元素，画笔和设备< / class>< / span>< / span>< / a>< / li>< < li>< a href =＃>工具&设备< span class =icon-dot-single>< / span>< / a>< / li> < li>< a href =＃>工作坊消耗品< / a>< / li>< / span>< / span>< < li>< a href =＃> AdBlue< span class =icon-dot-single>< / span>< / a>< / li> < / UL> < /锂> < li>< a href =＃>联络我们< / a>< / li> < li>< a href =＃>关于我们< / a>< / li> < li>< a href =＃>相片库< / a>< / li> < / UL> < / nav>< / header>

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> 
< script> 
 $（document）.ready（function（）{
 
 $（。bt-menu）。click（function（）{$（nav）。slideToggle（）; }）; 
 
}）; 
< / script> 
< header> 
< div class =menu_bar> 
< a href =＃class =bt-menu>< span class =icon-menu>< / span>菜单< / a> 
< / div> 
< nav> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li class =submenu> 
< a href =＃>尼尔森产品< span class =icon-arrow-down2>< / span>< span class =caret>< / span>< ; / A> 
< ul class =children> 
< a>< a href =＃>外部清洁< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>内部清洁< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>气味控制&空气清新剂< / class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>外观完成< / a>< / li>< / span>< / span>< 
< li>< a href =＃>敷料敷料< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃>玻璃清洁< span class =icon-dot-single>< / span>< / a>< / li> 
< a>< a href =＃>工作坊维护< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃> Janitorial< span class =icon-dot-single>< / span>< / a>< / li> 
< li>< a href =＃> TDS& SDS INFO< span class =icon-dot-single>< / span>< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>尼尔森产品目录< / a>< / li> 
< li class =submenu> 
< a href =＃>设备/工具/耗材< span class =icon-arrow-down2>< / span>< span class =caret><跨度>< / A> 
< ul class =children> 
< li>< a href =＃>元素，画笔和设备< / li>< / span>< / span>< / a>< / li> ， 
< li>< a href =＃>工具&设备< span class =icon-dot-single>< / span>< / a>< / li> 
< a>< a href =＃>工作坊耗材< / a>< / li>< / span>< / span& 
< li>< a href =＃> AdBlue< span class =icon-dot-single>< / span>< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>联络我们< / a>< / li> 
< li>< a href =＃>关于我们< / a>< / li> 
< li>< a href =＃>相片库< / a>< / li> 
< / ul> 
< / nav> 
< / header> 
  

Hi I need something that will make the nav contents slide out from the left when the div class "bt-menu" is pressed. It also needs to slide back in to the left when the div is clicked again, or anywhere outside of the nav is clicked.

There are sub menus in the main nav ,as you can see in the code below, this means that I need to be able to click a LI with the class "submenu" and have the list inside it slide down from underneath it.

Sorry I cant figure out how to show you the css I have.

<header>
    <div class="menu_bar">
        <a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li class="submenu" >
                <a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                <ul class="children">
                    <li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
                </ul>
            </li>
            <li><a href="#">Nielsen Catalogue</a></li>
            <li class="submenu">
                <a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                <ul class="children">
                    <li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
                </ul>
            </li>   
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Photo Gallery</a></li>
        </ul>
    </nav>
</header>

Hope you can help, thanks

解决方案

the simplest way is:

$(".bt-menu").click(function(){  $("nav").slideToggle(); });

I edit the code you can check it work.

$(document).ready(function(){
  
$(".bt-menu").click(function(){  $("nav").slideToggle(); });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header>
    <div class="menu_bar">
        <a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li class="submenu" >
                <a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                <ul class="children">
                    <li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
                </ul>
            </li>
            <li><a href="#">Nielsen Catalogue</a></li>
            <li class="submenu">
                <a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                <ul class="children">
                    <li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
                    <li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
                </ul>
            </li>   
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Photo Gallery</a></li>
        </ul>
    </nav>
</header>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
$(document).ready(function(){

$(".bt-menu").click(function(){  $("nav").slideToggle(); });

  });
</script>
    <header>
        <div class="menu_bar">
            <a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li class="submenu" >
                    <a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                    <ul class="children">
                        <li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
                    </ul>
                </li>
                <li><a href="#">Nielsen Catalogue</a></li>
                <li class="submenu">
                    <a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
                    <ul class="children">
                        <li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
                        <li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
                    </ul>
                </li>   
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Photo Gallery</a></li>
            </ul>
        </nav>
    </header>

这篇关于我如何制作&lt; nav&gt;幻灯片点击div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！