Responsive Mobile Menu
How do I make an responsive mobile menu?
What is a responsive mobile menu? How do you make a responsive mobile menu? This script and codes were developed by Deyan Dimitrov on 13 November 2022, Sunday.
Responsive Mobile Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Mobile Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>
<title>Responsive Mobile Menu</title>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body> <nav class="mobile-menu"> <ul> <li><a href='#home'>Home</a></li> <li><a href='#about-me'>About me</a></li> <li><a href='#gallery'>Gallery</a></li> <li><a href='#blog'>Blog</a></li> <li><a href='#links'>Links</a></li> <li><a href='#sitemap'>Sitemap</a></li> </ul> </nav>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
Responsive Mobile Menu - Script Codes CSS Codes
html{ width:100%;
}
body{ margin:0; padding:0; width:100%;
}
.mobile-menu { display:block; position:relative; width:100%; min-width:100%; padding:0px; margin:25px auto 0 !important; text-align: center; line-height:19px !important; background:#33cc66;
}
.mobile-menu * { -webkit-tap-highlight-color:transparent !important; font-family:Arial;
}
.mobile-menu a { color:#ebebeb; text-decoration:none;
}
.mobile-menu .mobile-menu-main-list, .mobile-menu .mobile-menu-main-list li { margin:0px; padding:0px;
}
.mobile-menu ul { display:block; width:auto !important; margin:0 auto !important; overflow:hidden; list-style:none;
}
.mobile-menu .mobile-menu-main-list li { display:inline; padding:padding:0px; margin:0px !important;
}
.mobile-menu-toggled { display:none; width:100%; position:relative; overflow:hidden; margin:0 auto !important;
}
.mobile-menu-button:hover { cursor:pointer;
}
.mobile-menu .mobile-menu-toggled ul { display:none; margin:0px !important; padding:0px !important;
}
.mobile-menu .mobile-menu-toggled ul li { display:block; margin:0 auto !important;
}
/* MINIMAL STYLE */
.mobile-menu.minimal a { color:#fff;
}
.mobile-menu.minimal a:hover { opacity:0.7;
}
.mobile-menu.minimal .mobile-menu-main-list li a { display:inline-block; padding:8px 30px 8px 30px; margin:0px -3px 0px -3px; font-size:15px;
}
.mobile-menu.minimal .mobile-menu-toggled { width:100%; min-height:36px;
}
.mobile-menu.minimal .mobile-menu-toggled-controls { display:block; height:36px; color:#fff; text-align:left; position:relative; cursor:pointer;
}
.mobile-menu.minimal .mobile-menu-toggled-title { position:relative; top:9px; left:9px; font-size:16px; color:#fff;
}
.mobile-menu.minimal .mobile-menu-button { display:block; position:absolute; right:9px; top:7px;
}
.mobile-menu.minimal .mobile-menu-button span { display:block; margin:4px 0px 4px 0px; height:2px; background:#fff; width:25px;
}
.mobile-menu.minimal .mobile-menu-toggled ul li a { display:block; width:100%; text-align:center; padding:10px 0px 10px 0px; border-bottom:1px solid #dedede; color:#fff;
}
.mobile-menu.minimal .mobile-menu-toggled ul li:first-child a { border-top:1px solid #dedede;
}
Responsive Mobile Menu - Script Codes JS Codes
/*
Remastered from Responsive Mobile Menu v1.0
responsivemobilemenu.com
*/
function responsiveMobileMenu() { $('.mobile-menu').each(function() { $(this).children('ul').addClass('mobile-menu-main-list'); // mark main menu list var $style = $(this).attr('data-menu-style'); // get menu style if ( typeof $style == 'undefined' || $style == false ) { $(this).addClass('minimal'); // set graphite style if style is not defined } else { $(this).addClass($style); } /* width of menu list (non-toggled) */ var $width = 0; $(this).find('ul li').each(function() { $width += $(this).outerWidth(); }); // if modern browser if ($.support.leadingWhitespace) { $(this).css('max-width' , $width*1.428+'px'); // change this value in order mobile menu to appear in different resolution } // else { $(this).css('width' , $width*1.05+'px');// change this value in order basic menu to appear in different resolution } });
}
function getMobileMenu() { /* build toggled dropdown menu list */ $('.mobile-menu').each(function() { var menutitle = $(this).attr("data-menu-title"); if ( menutitle == "" ) { menutitle = "Menu"; } else if ( menutitle == undefined ) { menutitle = "Menu"; } var $menulist = $(this).children('.mobile-menu-main-list').html(); var $menucontrols ="<div class='mobile-menu-toggled-controls'><div class='mobile-menu-toggled-title'>" + menutitle + "</div><div class='mobile-menu-button'><span> </span><span> </span><span> </span></div></div>"; $(this).prepend("<div class='mobile-menu-toggled mobile-menu-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>"); });
}
function adaptMenu() { /* toggle menu on resize */ $('.mobile-menu').each(function() { var $width = $(this).css('max-width'); $width = $width.replace('px', ''); if ( $(this).parent().width() < $width*1.05 ) { $(this).children('.mobile-menu-main-list').hide(0); $(this).children('.mobile-menu-toggled').show(0); } else { $(this).children('.mobile-menu-main-list').show(0); $(this).children('.mobile-menu-toggled').hide(0); } });
}
$(function() { responsiveMobileMenu(); getMobileMenu(); adaptMenu(); /* slide down mobile menu on click */ $('.mobile-menu-toggled, .mobile-menu-toggled .mobile-menu-button').click(function(){ if ( $(this).is(".mobile-menu-closed")) { $(this).find('ul').stop().show(300); $(this).removeClass("mobile-menu-closed"); } else { $(this).find('ul').stop().hide(300); $(this).addClass("mobile-menu-closed"); } });
}); /* hide mobile menu on resize */
$(window).resize(function() { adaptMenu();
});
Developer | Deyan Dimitrov |
Username | deyand |
Uploaded | November 13, 2022 |
Rating | 3 |
Size | 3,267 Kb |
Views | 22,264 |
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!
Name | Size |
Progress Bar with jQuery | 2,749 Kb |
Show Extra Image on MouseOver with CSS | 1,716 Kb |
404 error bad TV page | 2,243 Kb |
A Pen by Deyan Dimitrov | 2,253 Kb |
Fixed header | 3,802 Kb |
Mobile Dropdown Menu | 4,204 Kb |
Sliding side menu with icons | 2,357 Kb |
Splash background image with text | 2,206 Kb |
Image Hover Zoom Effect | 2,052 Kb |
Expandable Menu | 3,006 Kb |
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!
Name | Username | Size |
Apex Calculator | Michaelwnelson | 2,370 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!