How do i make
slide in on click of div?

Question

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

`code` $(document).ready(main); var counter = 1; function main () { $(".menu_bar").click(function(){ if (counter == 1) { $("nav").animate({ left: '0' }); counter = 0; } else { counter = 1; $("nav").animate({ left: '-100%' }); } }); $(".submenu").click(function(){ $(this).children(".children").slideToggle(); }); } `code` — Andeb-autos, Oct 04 '15 at 18:16
Recommend you put up a demo at jsfiddle or codepen.io. It's kind of hard to tell from this what you've tried, and where you are stuck — 1800 INFORMATION, Oct 05 '15 at 01:04

Omidam81 · Answer 1 · 2015-10-04T18:52:01.987

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>

I copied this code and it still didn't work, I only want it to slide in when the screen is smaller than a certain size. I have a nav menu working for a laptop but I cant get the button working for when the screen size decreases. — Andeb-autos, Oct 04 '15 at 18:29
for checking is your website ruining on mobile device you can use this post: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — Omidam81, Oct 04 '15 at 18:33
if you use chrome press shift+cnt+i and then copy console log here — Omidam81, Oct 04 '15 at 18:34
this is problems that you may have: 1) you didnt add jquery 2) add this script before jquery loaded. — Omidam81, Oct 04 '15 at 18:42
I added the jquery so how do I know if I did the second problem? — Andeb-autos, Oct 04 '15 at 18:44
make sure the script tag for running slidetoggle is placed after the script for adding jquery — Omidam81, Oct 04 '15 at 18:47
can you send me the whole head section of the code in the correct order so I can make sure it is definitely right please — Andeb-autos, Oct 04 '15 at 18:49
They are definitely in the right order so I don't know what is wrong — Andeb-autos, Oct 04 '15 at 18:51
Ok, I managed to get the sliding bit to work but when the webpage is first loaded the menu is open and I would like it to start closed. — Andeb-autos, Oct 04 '15 at 18:55
IT WORKS! The only thing I wouldn't mind being fixed is when you load the page for the first time, you can see the nav being toggled shut, is there anyway of it just being shut without you having to watch it close? Maybe in the CSS? — Andeb-autos, Oct 04 '15 at 18:59
That fixed it but I Just found another problem. It is making the nav toggle on the laptop version to but I just want it to toggle on mobile version. I only edited the nav css after the media query — Andeb-autos, Oct 04 '15 at 19:03

How do i make
slide in on click of div?

1 Answers1

Linked

How do i make slide in on click of div?

1 Answers1

Linked

How do i make
slide in on click of div?