Drop down sidebar

Developer
Anthony Young
Size
2,616 Kb
Views
24,288
  1. Drop down sidebar Previews
  2. Drop down sidebar HTML Codes
  3. Drop down sidebar CSS Codes
  4. Drop down sidebar JS Codes

How do I make an drop down sidebar?

What is a drop down sidebar? How do you make a drop down sidebar? This script and codes were developed by Anthony Young on 31 October 2022, Monday.

Drop down sidebar Previews
IQ Test

Drop down sidebar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drop down sidebar</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container">
<div id="sidebar-wrapper"> <div id="animating-sidebar"> <div class="sidebar-title" style="z-index: 999;"> <h4 style="background-image: url('/images/arrowdown.jpg');">drop down</h4> </div> <ul class="down" style="margin-top: 0px;"> <li style="border-top: medium none;"><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </div> <div style="clear:both;"></div> <div id="sidebar"> <div class="sidebar-title help-page"> <h3>header</h3> </div> <ul> <li class="active"><a href="#">item</a></li> <li class=""><a href="#">item</a></li> </ul> </div>
</div>
</div><!-- end of container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drop down sidebar - Script Codes CSS Codes

#container { margin: 20px;
}
a {
text-decoration: none;
}
#animating-sidebar { box-shadow: 2px 0 5px #FCFCFC; width: 280px;
}
#animating-sidebar .sidebar-title h4 { background-image: url("/images/arrowup.jpg"); background-position: right center; background-repeat: no-repeat; color: #8F8F8F; display: inline-block; width: 95px;
}
.sidebar-title h4, .sidebar-label { margin: 0; padding: 10px 15px;
}
#sidebar-wrapper div#sidebar div.sidebar-title h3 {
padding: 10px 15px;
}
#animating-sidebar .sidebar-title { background-color: #FBFBFB; background-image: url("/images/wline.png"); background-position: center top; background-repeat: no-repeat; border: 1px solid #F3F3F3; display: inline; float: left; position: relative; width: 278px;
}
#animating-sidebar .sidebar-title h4 { background-image: url("/images/arrowup.jpg"); background-position: right center; background-repeat: no-repeat; color: #8F8F8F; display: inline-block; width: 95px;
}
#animating-sidebar ul { background-color: #FBFBFB; border-bottom: 1px solid #F3F3F3; border-left: 1px solid #F3F3F3; border-right: 1px solid #F3F3F3; display: inline; float: left; padding: 0px; margin-bottom: 30px; position: relative; width: 278px; z-index: 15; list-style: none;
}
.sidebar.popular-questions ul li, #animating-sidebar ul li { padding: 12px 15px;
}
.sidebar, #sidebar { background-color: #FBFBFB; background-image: url("/images/wline.png"); background-position: center top; background-repeat: no-repeat; border: 1px solid #F3F3F3; box-shadow: 2px 2px 5px #F9F9F9; display: inline; float: left; margin-bottom: 30px; min-height: 100px; width: 278px;
}

Drop down sidebar - Script Codes JS Codes

var $animating_slider_ul = $('#animating-sidebar ul');
$('#animating-sidebar .sidebar-title').css('z-index','999'); $animating_slider_ul.css('margin-top','-'+$animating_slider_ul.height()-2+'px');
$('#animating-sidebar .sidebar-title').click(function(){
if ( $('#animating-sidebar').find('ul').hasClass('up') ) { $(this).find('h4').css('background-image', 'url("/images/arrowdown.jpg")') $('#animating-sidebar').find('ul').animate({ marginTop:'0' }, function(){ $(this).addClass('down').removeClass('up'); $(this).find('li:first').css('border-top','none'); }); } if ( $('#animating-sidebar').find('ul').hasClass('down') ) { $(this).find('h4').css('background-image', 'url("/images/arrowup.jpg")') $('#animating-sidebar').find('ul').animate({ marginTop:'-'+$animating_slider_ul.height()-2+'px' }, function(){ $(this).removeClass('down').addClass('up'); }); } });
Drop down sidebar - Script Codes
Drop down sidebar - Script Codes
Home Page Home
Developer Anthony Young
Username ayoungh
Uploaded October 31, 2022
Rating 3
Size 2,616 Kb
Views 24,288
Do you need developer help for Drop down sidebar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Young (ayoungh) Script Codes
Name
JS Countdown Timer
Awesome textarea
Material header and menu drawer
Yourorderhub.co.uk
Send email
UL scroll to
Tags and searching etc
Particle.js play
Mobile push in nav
SVG
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!