Responsive nav

Developer
Tom Markart
Size
5,123 Kb
Views
18,216
  1. Responsive nav Previews
  2. Responsive nav HTML Codes
  3. Responsive nav CSS Codes
  4. Responsive nav JS Codes

How do I make an responsive nav?

What is a responsive nav? How do you make a responsive nav? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

Responsive nav Previews
IQ Test

Responsive nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!------- Modified from https://codepen.io/lukejacksonn/pen/BowbWE ------->
<nav class="flex"> <!------- Logo -------> <h1 class="logo"> <a href="http://www.newsobserver.com" target="_blank"><img src="http://www.tmarkart.com/codepen/images/no-logo.png" /></a> </h1> <ul class="links"> <li> <a href="#">Home</a> </li> <li> <a href="#">Local News</a> </li> <li> <a href="#">Sports</a> </li> <li> <a href="#">Living</a> </li> <li> <a href="#">Classifieds</a> </li> <li> <a href="#">Obituaries</a> </li> <li> <a href="#">Entertainment</a> </li> </ul> <button>Full Menu</button> <ul class="hidden-links hidden"></ul>
</nav>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis justo vel justo consectetur, at dignissim libero aliquet. Vivamus metus lacus, blandit et lectus sit amet, porttitor commodo justo. Praesent sodales metus id accumsan imperdiet. Sed eget erat lobortis, mollis est sagittis, dictum est. Vestibulum vestibulum sed arcu nec posuere. Etiam sem urna, ullamcorper vel iaculis ac, porttitor vitae lacus. Cras finibus dignissim libero, vitae mollis lacus venenatis et. In quis dignissim mauris, ac aliquet quam. Proin consectetur eget tellus in accumsan. Morbi consectetur eu dui eget maximus. Curabitur facilisis, eros eget volutpat congue, ex nibh molestie lacus, in porttitor nulla magna eget augue. Morbi suscipit vel ipsum ac posuere. Mauris feugiat orci at vestibulum varius. Donec lacinia lectus ac pulvinar vehicula. Cras ac nisl massa. Sed sit amet vehicula urna.
</p>
<p> Praesent nec turpis eu dolor bibendum auctor non vitae magna. Quisque diam orci, condimentum ut lorem id, aliquet iaculis tortor. Duis sed lobortis justo, eu consectetur ligula. Aenean sodales, ligula at rhoncus sodales, lectus metus feugiat tellus, ac ullamcorper nisi massa eu eros. Nulla dapibus molestie erat, vitae semper diam sagittis ut. Proin in varius felis. Donec consequat varius quam, nec bibendum sem. Integer hendrerit euismod gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p> Integer quis posuere ligula. Ut tempor quam vitae ante mollis, non maximus erat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque porttitor laoreet. Nulla placerat nec turpis quis finibus. Praesent lacinia cursus convallis. Vivamus et egestas ante. Curabitur nunc odio, mattis et semper at, iaculis quis massa. Ut facilisis erat nec quam aliquam, nec fringilla nisl gravida. Morbi vulputate, enim sit amet fermentum vestibulum, tellus nunc faucibus sem, vel sodales sapien sapien eget mauris. Sed pulvinar lorem nec ante mollis euismod. Nunc enim magna, dignissim eu erat ac, tempor hendrerit risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec gravida massa.
</p> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive nav - Script Codes CSS Codes

nav.flex { position: relative; height: 60px; display: flex; align-items: center; background: #424242; margin-bottom: 3rem;
}
nav.flex h1 { display: flex; align-self: stretch; align-items: center; color: #fff; padding: 0 1.5rem;
}
nav.flex button { align-self: stretch; transition: all .4s ease-out; padding: 0 1rem 0 1.5rem; outline: 0; border: 0; font-size: 0.9rem; font-weight: bold; background: #ba2814; color: #fff; cursor: pointer;
}
nav.flex button.hidden { transition: none; border-right: 0.5rem solid #ba2814; width: 0; padding: 0; overflow: hidden;
}
nav.flex button::after { content: attr(count); display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: #000; color: #f2f2f2; box-shadow: 0 0 1px 0 rgba(0,0,0,0.8); border-radius: 50%; font-size: 14px; line-height: 14px; margin-left: 1rem; margin-right: calc(-1rem + -8px);
}
ul.links { display: flex; justify-content: flex-end; flex: 1; overflow: hidden;
}
ul.links li { flex: none; padding: 1rem;
}
ul.links li a { color: #fff; text-decoration:none;
}
ul.links li a:hover { color: #ccc;
}
ul.hidden-links { position: absolute; background: #686868; right: 0; top: 100%;
}
ul.hidden-links li a { color: #fff; padding-right: 1rem; text-decoration:none;
}
ul.hidden-links li a:hover { color: #ccc;
}
ul.hidden-links.hidden { display: none;
}
ul.hidden-links li { padding: 1rem;
}
/*
-- Demo Styles
*/
* { box-sizing: border-box;
}
html { background: #fefefe;
}
body { padding: 2rem;
}
h5 { text-align: center; margin: auto; font-size: 0.8rem; line-height: 140%; margin-top: 1rem; max-width: 50ex;
}
p { line-height:1.5; margin-bottom: 2rem;
}
html { width: 100%; height: 100%; font-family: Helvetica, sans-serif;
}

Responsive nav - Script Codes JS Codes

$(function() { var $nav = $('nav.flex'); var $btn = $('nav.flex button'); var $vlinks = $('nav.flex .links'); var $hlinks = $('nav.flex .hidden-links'); var numOfItems = 0; var totalSpace = 0; var breakWidths = []; // Get initial state $vlinks.children().outerWidth(function(i, w) { totalSpace += w; numOfItems += 1; breakWidths.push(totalSpace); }); var availableSpace, numOfVisibleItems, requiredSpace; function check() { // Get instant state availableSpace = $vlinks.width() - 10; numOfVisibleItems = $vlinks.children().length; requiredSpace = breakWidths[numOfVisibleItems - 1]; // There is not enought space if (requiredSpace > availableSpace) { $vlinks.children().last().prependTo($hlinks); numOfVisibleItems -= 1; check(); // There is more than enough space } else if (availableSpace > breakWidths[numOfVisibleItems]) { $hlinks.children().first().appendTo($vlinks); numOfVisibleItems += 1; } // Update the button accordingly $btn.attr("count", numOfItems - numOfVisibleItems); if (numOfVisibleItems === numOfItems) { $btn.addClass('hidden'); } else $btn.removeClass('hidden'); } // Window listeners $(window).resize(function() { check(); }); $btn.on('click', function() { $hlinks.toggleClass('hidden'); }); check();
});
Responsive nav - Script Codes
Responsive nav - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 5,123 Kb
Views 18,216
Do you need developer help for Responsive nav?

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!

Tom Markart (tmarkart) Script Codes
Name
Story Detail 1.0
Slide out nav
MPP Contact Us
Election Widget Combo
Election Widget Vertical
Story Detail 1.0b
Overlay nav
Google Matched Content - rendered
Vertical Image Filler
CSS Animation Playground
Create amazing blog posts 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!