When Creating of responsive web design , build a solid navigation for Desktop, Tablet and Mobile. You want to give your users direct access to all your important links, without flooding the page making it unreadable. It is also a good idea to keep your responsive navigation hidden away until it's needed. What I like most about the toggled navigation is that you can design menus in so many various forms. You can have links drop down from the top, or slide down, or push content over from the left or right side. Designers have so many options to play with and there is plenty of time for UI experiments.
What I like most about the toggled navigation is that you can design menus in so many various forms. You can have links drop down from the top, or slide down,
or push content over from the left or right side. Designers have so many options to play with and there is plenty of time for UI experiments.
================================== Javascript ===============================
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav 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');
}
});
});
</script>
===================================== Html-5 ===============================
<nav class="clearfix">
<ul class="clearfix">
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
</nav>
=================================== Css-3 ====================================
/* Clearfix */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clearfix a { color:#fff; }
.clearfix a:visited { color:#fff; }
.clearfix a:active { color:#fff; }
/* Basic Styles */
nav { height: 40px; width: 100%; background: #4e4e4e; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold;
position: relative; border-bottom: 2px solid #283744; }
nav ul { padding: 0; margin: 0 auto; width:100%; height: 40px; }
nav li { display: inline; float: left; }
nav a { color:#fff; display: inline-block; width:auto; padding:0 15px; text-align: center; text-decoration: none; line-height: 40px; text-shadow: 1px 1px 0px #283744; }
nav li a { border-right: 1px solid #ccc; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; color:#fff; }
nav li:last-child a { border-right: 0; }
nav a:hover, nav a:active { background:#666; }
nav a#pull { display: none; }
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav { height: auto; }
nav ul { width: 100%; display: block; height: auto; }
nav li { width: 50%; float: left; position: relative; }
nav li a { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
nav a { text-align: left; width: 100%; text-indent: 25px; }
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav { border-bottom: 0; }
nav ul { display: none; height: auto; }
nav a#pull { display: block; background: #333; width:96%; position: relative; }
nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute;
right: 15px; top: 10px; }
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li { display: block; float: none; width: 100%; }
nav li a { border-bottom: 1px solid #576979; }
============================================================================
