Mon - Sun 8.00 AM - 8.00 PM
edu@teknowize.com
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Responsive menu using HTML CSS and jQuery
HTML
CSS
JS
Output
HTML
<html> <head> <title>Responsive menu using HTML CSS and jQuery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <h1 class="selectBoxHeading">Responsive Menu using HTML CSS and jQuery</h1> <p class="paraHead">Resize your window size to view responsiveness</p> <div class="mobile-menu" id="mobile-menu"> Menu <img src="https://www.teknowize.com/attachments/file_1659729526.svg"> </div> <header> <ul> <li><a href="javascript:void(0)">Item no 1</a></li> <li><a href="javascript:void(0)">Item no 2</a></li> <li><a href="javascript:void(0)">Item no 3</a></li> <li><a href="javascript:void(0)">Item no 4</a></li> <li><a href="javascript:void(0)">Item no 5</a></li> </ul> </header> </body> </html>
CSS
.selectBoxHeading { color: rgb(6, 2, 114); text-align: center; } .paraHead { font-size: 20px text-align:center; } header ul { padding: 2px; margin: 0px; position: absolute; background-color: #fff; border: 1px solid #078EE5; } header ul li { margin: 5px; float: left; list-style: none; line-height: 30px; position: relative; border: 1px solid #078EE5; background-color: #078EE5; } header ul li:hover { margin: 5px; color: #078EE5; background-color: #fff; border: 1px solid #078EE5; } header ul li:hover>a { color: #078EE5; } header ul li a { color: #fff; padding: 10px; text-decoration: none; } .mobile-menu { background-color: red; position: relative; display: none; } @media (max-width: 640px) { .mobile-menu { display: block; background-color: #078EE5; color: #fff; padding: 5px 10px; cursor: pointer; } .mobile-menu img { width: 25px; top: 2px; right: 10px; position: absolute; } header { position: relative; height: auto; } header ul { display: none; list-style: none; padding: 0; margin: 0; width: 99%; top: 0; position: absolute; } header ul li { width: 92%; position: relative; padding: 5px; background-color: #078EE5; cursor: pointer; } }
JS
$(function () { var pull = $('#mobile-menu'); menu = $('header ul'); menuHeight = menu.height(); $(pull).on('click', function (e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function () { var w = $(window).width(); if (w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); });
Output
Mon -
Sun 8.00 AM - 8.00 PM
edu@teknowize.com
Mon -
Sun 8.00 AM - 8.00 PM
edu@teknowize.com
