Scribd
Upload
28 views

This Menu Turns Into A When Window Is Less Than 960px To Conserve Space

This document provides an example of converting a navigation menu to a dropdown select menu on smaller screens to save space. When the window width is less than 960px, the nav links are hidden and replaced with a select dropdown. JavaScript is used to dynamically populate the dropdown with the nav link text and hrefs and handle changing the page when an option is selected. CSS media queries hide the nav links and display the select dropdown for narrow screens.

Uploaded by

rupeshkumarinfo
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

This Menu Turns Into A When Window Is Less Than 960px To Conserve Space

This document provides an example of converting a navigation menu to a dropdown select menu on smaller screens to save space. When the window width is less than 960px, the nav links are hidden and replaced with a select dropdown. JavaScript is used to dynamically populate the dropdown with the nav link text and hrefs and handle changing the page when an option is selected. CSS media queries hide the nav links and display the select dropdown for narrow screens.

Uploaded by

rupeshkumarinfo
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

===========================CSS-Tricks=============================================

CSS-Tricks Example

This menu turns into a <select> when window is less than 960px to conserve space.

Home Books Blog About Us Support

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Convert Menu to Dropdown</title> <style> * { margin: 0; padding: 0; } h1 { font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; width: 500px; margin: 0 auto 15px; } nav { display: block; width: 960px; margin: 100px auto; text-align: center; } nav ul { list-style: none; } nav li { display: inline-block; } nav a {

display: inline-block; background: #333; color: white; padding: 5px 15px; border: 1px solid white; text-decoration: none; } nav a:hover { border: 1px solid red; background: red; } nav a:active { background: blue; } nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } } </style> <!-- You COULD just put both menus in the markup, but if you don't like that, this is how you could dynamically create it with jQuery. --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></scrip t> <script> // DOM ready $(function() { // Create the dropdown base $("<select />").appendTo("nav"); // Create default option "Go to..." $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("nav select"); // Populate dropdown with menu items $("nav a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("nav select"); }); // To make dropdown actually work

// To make more unobtrusive: http://css-tricks.com/4064unobtrusive-page-changer/ $("nav select").change(function() { window.location = $(this).find("option:selected").val(); }); }); </script> </head> <body> <div id="demo-top-bar"><div id="demo-bar-inside"><h2 id="demo-bar-badge">CSSTricks Example</h2><div id="demo-bar-buttons"><a class="header-button" href="/13303-convert-menu-to-dropdown/"> Back to Article</a> <a class="header-button" href="/examples/">More Demos </a></div><div id="demobar-ad"><div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div> <nav> <h1>This menu turns into a <select> when window is less than 960px to conserve space.</h1> <ul> <li><a <li><a <li><a <li><a <li><a </ul> </nav> </body> </html> href="#" class="active">Home</a></li> href="#books">Books</a></li> href="#blog">Blog</a></li> href="#about">About Us</a></li> href="#support">Support</a></li>

You might also like