CODEWITHSUNDEEP
jqueryhtml
Hasan
Hasan

Reputation: 355

JS toggle button not working

I have created a Navigation bar and that contain Toggle Button, I'm facing a problem with Space between List Items and The problem has been solved by this https://stackoverflow.com/a/5256640/9947640 method.Unfortunately, its create another big problem, The problem is my Toggle Button not working.
I don't understand what I'm doing wrong and what should I do?

$(document).ready(function(){
  $(".menu-icon").on("click",function(){
    $("nav ul").toggleClass("showing");
  });
});

//Scrolling Effect
$(window).on("scroll", function(){
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  }else{
    $('nav').removeClass('black');
  }
});
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
 
.content {
  width: 90%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}
 
.logo {
    position: absolute;
    float: left;
    margin: 16px 46px;
    color: #333;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}
nav{
	position: fixed;
	width: 100%;
}

nav ul{
	list-style-type: none;
	background: rgba(0,0,0,0);
	overflow: hidden;
	color: #fff;
	padding: 0;
	text-align: center;
	margin:0;
	transition: 1.1s;
	font-size:0;
}
nav.black ul{
	background-color: #000000;
}
nav ul li{
	display: inline-block;
	font-size:14px;
	padding: 20px;
	background-color:#ffab00;
}
nav ul li a{
	text-decoration: none;
	color: #333333;
	font-size: 20px;
}

.menu-icon{
	width: 100%;
	background-color: #000000;
	text-align: right;
	box-sizing: border-box;
	padding: 15px 2px;
	cursor: pointer;
	color: #fff;
	display: none;
}

nav #right-menu{
	position: absolute;
	right: 0;
}
nav  #right-menu ul{
	text-align: right;
}
@media(max-width: 768px){
	.logo{
		position: fixed;
		top: 0;
		margin-top: 16px;
	}
	nav ul{
		max-height: 0px;
		background-color: #000000;
	}
	nav.black ul{
		background: #000000;
	}
	.showing {
		max-height: 20em;
	}
	nav ul li{
		box-sizing: border-box;
		width: 100%;
		padding: 15px 0;
		text-align: center;
	}
	.menu-icon{
		display: block;
		padding-right: 30px;
	}

	nav #right-menu{
		position: relative;
	}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script  src="https://code.jquery.com/jquery-3.3.1.js"></script>
<header>
	<nav>
		<div class="menu-icon">
			<i class="fas fa-bars fa-2x"></i>
		</div>
		<div class="logo">
			Logo
		</div>
  <div class="menu" id="right-menu">
	<ul >
	  <li><a href="#">HOME</a></li>
	  <li><a href="#">ABOUT</a></li>
	</ul>
  </div>
		<div class="menu">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">SERVICE</a></li>
			</ul>
		</div>
	</nav><!----- nav ------>
</header><!----- header ------>

Upvotes: 0

Views: 105

Answers (3)

ReSedano
ReSedano

Reputation: 5060

Simply reset max-height on .showing

$(document).ready(function(){
  $(".menu-icon").on("click",function(){
    $("nav ul").toggleClass("showing");
  });
});

//Scrolling Effect
$(window).on("scroll", function(){
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  }else{
    $('nav').removeClass('black');
  }
});
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
 
.content {
  width: 90%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}
 
.logo {
    position: absolute;
    float: left;
    margin: 16px 46px;
    color: #333;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}
nav{
    position: fixed;
    width: 100%;
}

nav ul{
    list-style-type: none;
    background: rgba(0,0,0,0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin:0;
    transition: 1.1s;
    font-size:0;
}
nav.black ul{
    background-color: #000000;
}
nav ul li{
    display: inline-block;
    font-size:14px;
    padding: 20px;
    background-color:#ffab00;
}
nav ul li a{
    text-decoration: none;
    color: #333333;
    font-size: 20px;
}

.menu-icon{
    width: 100%;
    background-color: #000000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 2px;
    cursor: pointer;
    color: #fff;
    display: none;
}

nav #right-menu{
    position: absolute;
    right: 0;
}
nav  #right-menu ul{
    text-align: right;
}
@media(max-width: 768px){
    .logo{
        position: fixed;
        top: 0;
        margin-top: 16px;
    }
    nav ul{
        max-height: 0px;
        background-color: #000000;
    }
    nav.black ul{
        background: #000000;
    }
    .showing {
        max-height: none; /* Change this */
    }
    nav ul li{
        box-sizing: border-box;
        width: 100%;
        padding: 15px 0;
        text-align: center;
    }
    .menu-icon{
        display: block;
        padding-right: 30px;
    }

    nav #right-menu{
        position: relative;
    }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script  src="https://code.jquery.com/jquery-3.3.1.js"></script>
<header>
    <nav>
        <div class="menu-icon">
            <i class="fas fa-bars fa-2x"></i>
        </div>
        <div class="logo">
            Logo
        </div>
  <div class="menu" id="right-menu">
    <ul >
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
    </ul>
  </div>
        <div class="menu">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">SERVICE</a></li>
            </ul>
        </div>
    </nav><!----- nav ------>
</header><!----- header ------>

Upvotes: 1

Chaska
Chaska

Reputation: 3205

nav ul.showing is missing in css?

I added nav ul.showing { display: block; } and display: none; in nav ul to get it works...

Edit: also remove overflow: hidden in nav ul

$(document).ready(function(){
  $(".menu-icon").on("click",function(){
    $("nav ul").toggleClass("showing");
  });
});

//Scrolling Effect
$(window).on("scroll", function(){
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  }else{
    $('nav').removeClass('black');
  }
});
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}
 
.content {
  width: 90%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}
 
.logo {
    position: absolute;
    float: left;
    margin: 16px 46px;
    color: #333;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}
nav{
	position: fixed;
	width: 100%;
}

nav ul.showing {
  display: block;
}
nav ul{
	list-style-type: none;
	background: rgba(0,0,0,0);
	color: #fff;
	padding: 0;
	text-align: center;
	margin:0;
	transition: 1.1s;
	font-size:0;
}
nav.black ul{
	background-color: #000000;
}
nav ul li{
	display: inline-block;
	font-size:14px;
	padding: 20px;
	background-color:#ffab00;
}
nav ul li a{
	text-decoration: none;
	color: #333333;
	font-size: 20px;
}

.menu-icon{
	width: 100%;
	background-color: #000000;
	text-align: right;
	box-sizing: border-box;
	padding: 15px 2px;
	cursor: pointer;
	color: #fff;
	display: none;
}

nav #right-menu{
	position: absolute;
	right: 0;
}
nav  #right-menu ul{
	text-align: right;
}
@media(max-width: 768px){
	.logo{
		position: fixed;
		top: 0;
		margin-top: 16px;
	}
	nav ul{
  display: none;
		max-height: 0px;
		background-color: #000000;
	}
	nav.black ul{
		background: #000000;
	}
	.showing {
		max-height: 20em;
	}
	nav ul li{
		box-sizing: border-box;
		width: 100%;
		padding: 15px 0;
		text-align: center;
	}
	.menu-icon{
		display: block;
		padding-right: 30px;
	}

	nav #right-menu{
		position: relative;
	}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script  src="https://code.jquery.com/jquery-3.3.1.js"></script>
<header>
	<nav>
		<div class="menu-icon">
			<i class="fas fa-bars fa-2x"></i>
		</div>
		<div class="logo">
			Logo
		</div>
  <div class="menu" id="right-menu">
	<ul >
	  <li><a href="#">HOME</a></li>
	  <li><a href="#">ABOUT</a></li>
	</ul>
  </div>
		<div class="menu">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">SERVICE</a></li>
			</ul>
		</div>
	</nav><!----- nav ------>
</header><!----- header ------>

Upvotes: 1

Alpa Bhanderi
Alpa Bhanderi

Reputation: 41

hasan, max-height of showing class is wrong. set it in px. for example

@media (max-width: 768px)
.showing {
    max-height: 400px;
}

Upvotes: 1

Related Questions