I have the following code that is currently functioning properly for a dropdown menu, but I need to make some modifications to the CSS and jQuery.
I am looking to increase the size of the main box and decrease the width of the first row of icons.
However, when attempting to reduce the width, it affects the entire box rather than just the row of icons.
Please provide guidance.
FIDDLE LINK
http://fiddle.jshell.net/6pLPn/
Code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="logo">
JQUERY DEMO
</div>
<ul class="nav">
<li class="nav-link">
</li>
</ul>
</div>
<!-- Clickable Nav -->
<div class="click-nav">
<ul class="no-js">
<li>
<a class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
<ul>
<li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
<li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
<li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
<li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
<li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
</ul>
</li>
</ul>
</div>
<!-- /Clickable Nav -->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
// Clickable Dropdown
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
</script>
</body>
</html>