Can u help me please

JavaScript
1

Good afternoon! Can anyone tell me what’s wrong with my code. Can’t run javascript at all. I want to make my list visible when I click on the menu icon. Please, I don’t know what to do.

HTML JS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css">

<body>
	<div class="container">
	<div id="header">
		<div id="headslika">
		    <img src="../../Desktop/free-logo-designs.png" alt="slika">
		</div>
		
		<nav>
		<div class="toggle">
		    
        <img class="menu" src="img/menubar/menubar.png">

		</div>
		<ul>
			<li><a href="#">Pocetna</a></li>
			<li><a href="#">Proizvodi</a></li>
			<li><a href="#">Usluge</a></li>
			<li><a href="#">Cenovnik</a></li>
			<li><a href="#">Kontakt</a></li>
			</ul>
		</nav>
		</div>
	
	<main>
		<div id="clanak1"> </div>
		

		
		
		<div id="clanak2"></div>
		
		
		</main>
	
	
		
	<footer>
		
		
		</footer>
	
	</div>
	
	

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        
        $('.menu').click(function(){
            
            $('ul').toggleClass('.active');
            
        })
        
    })
    
    </script>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
*{
	margin: 0px;
	padding: 0px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
#headslika{
	width: 100%;
	height: auto;
}
#headslika img{
	width: 100%;
	height: 300px;
}

nav{
	width: 100%;
	background-color: aquamarine;
	margin-top: -4px;
}

ul{
    width: 80%;
    margin: 0 auto;
    padding: 0px;
    text-align: center;
}

ul li{
    list-style: none;
    display: inline-block;
    padding: 10px 30px;
}
ul li:hover{
    background-color: aqua;
}

ul li a{

    color: white;
    text-decoration: none;
    
}
.toggle{
    width: 100%;
    background-color: aqua;
    text-align: right;
    box-sizing: border-box;
    padding: 10px 20px;
    display: none;
    cursor: pointer;
}

.toggle img{
    width: 30px;
}

@media (max-width: 768px) {
    .toggle{
        display: block;
    }
    
    ul{
        width: 100%;
        display: none;
    }
    ul li{
        width: 100%;
        display: block;
        text-align: center;
    }
    .active{
        display: block;
    }
}
2

What does your browser’s console say?

3

Nothing, is empty :slight_smile:

4

I think I found your problem. Use 'active' instead of '.active' in toggleClass().

1 Like
6

OMG u are a genius! Thanks for quick response <3