CODEWITHSUNDEEP
javascriptjqueryhtmlcss
swamifalgun
swamifalgun

Reputation: 21

Unable to toggle list items for a responsive nav bar

I am unable to toggle the list view. What am I doing wrong?

html: 

<nav>
    <span class="nav-btn"></span>
    <ul class="nav">
         <li>home</li>
         <li>about</li>
         <li>blog</li>
         <li>contact</li>
    </ul>
</nav>

css: 

@media (max-width: 480px) {


    li {
        display: block;
        width: 480px;
        text-align: left;
        border: 1px solid black;
    }

    ul .nav{
        display: none;
    }
    .nav-btn:before {
        content: "Menu";
    }

    .nav-btn {
        display: block;
        background-color: yellow;
        font-size: 30px;
        text-align: center;
        cursor: pointer;
    }

script: 

$(function () {
    "use strict";
    $('.nav-btn').on('click',
        function () {
            $('.nav').toggleClass('open');
        });
});

Is it possible to only do this with the help of javascript ?

Upvotes: 0

Views: 59

Answers (2)

frnt
frnt

Reputation: 8795

First change spacing in below style i.e don't add space between them,

  ul.nav {
    display: none;
  }

Second use toggle and there is no styling declared for class open so add that and it works.

$(function() {
  "use strict";
  $('.nav-btn').on('click', function() {
    $('.nav').toggle('open');
  });
});
  @media screen and (max-width: 640px){
  li {
    display: block;
    width: 480px;
    text-align: left;
    border: 1px solid black;
  }
  ul.nav {
    display: none;
  }
  .nav-btn:before {
    content: "Menu";
  }
  .nav-btn {
    display: block;
    background-color: yellow;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
  }
.open{
	display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <span class="nav-btn"></span>
  <ul class="nav">

    <li>home</li>

    <li>about</li>

    <li>blog</li>

    <li>contact</li>
  </ul>
</nav>

Upvotes: 2

raghuveer999
raghuveer999

Reputation: 709

You are adding the class 'open'. But there is no CSS for that.

Try this in CSS

.nav.open {
    display: block;
}

Upvotes: 0

Related Questions