Toggle slider for mobile navigation
How do I make an toggle slider for mobile navigation?
Easy little slider for mobile navigation, floats on the right side of the browser.. What is a toggle slider for mobile navigation? How do you make a toggle slider for mobile navigation? This script and codes were developed by Marc on 04 September 2022, Sunday.
Toggle slider for mobile navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle slider for mobile navigation</title> <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> <h5>.: Click the toggle menu on the right :.</h5>
<div id="navigation"> <div class="toggle"> <div class="toggleline"></div> <div class="toggleline"></div> <div class="toggleline"></div> </div> <div class="menu"> <ul> <li><a href="#">Test 1</a></li> <li><a href="#">Test 22</a></li> <li><a href="#">Test 333</a></li> <li><a href="#">Test 44</a></li> <li><a href="#">Test 5</a></li> <li><a href="#">Test 6666</a></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Toggle slider for mobile navigation - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*{ margin: 0; padding: 0; font-family: Open sans;
}
body{ background: #fff;
}
h5{ text-align: center; margin-top: 50px;
}
#navigation { display:block; width:173px; float:right;
}
.toggle { height: 30px; width: 37px; cursor: pointer; position: relative; margin: 0 0 8px 136px;
}
.toggleline { margin-bottom: 5px; background: #A1A1A1; width: 37px; height: 5px; cursor: pointer;
}
.menu { display:none;
}
.menu li { list-style-type:none;display:inline;
}
.menu a { text-align:center; display:block; width:100%; height:31px; text-decoration:none; color:#918170; padding-top:9px; background-color:#E4E4E4; border-top:1px solid #FFF;
}
.menu a:hover { color:#FFF; background-color:#918170;
}
Toggle slider for mobile navigation - Script Codes JS Codes
$(document).ready(function(){ $('.toggle').click(function(){ $('.menu').slideToggle(); });
});
Developer | Marc |
Username | unaone |
Uploaded | September 04, 2022 |
Rating | 3 |
Size | 2,153 Kb |
Views | 26,312 |
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 |
A Pen by Marc | 1,713 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 |
JQuery exercise | Brian-baum | 3,780 Kb |
Tooltip in table | Roine | 3,713 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Simple content swap | Snografx | 1,859 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Form Labels | Bartuc | 2,717 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Slick Slider | Wearebold | 5,913 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!