Convert a Menu to a Dropdown for Small Screens

We come across the digital world where the technology is at its pace. As the time passes the websites are compatible to mobile devices, but still there are some issues due to which the website cannot be made device compatible. So, what to in this case.

Here comes the solution:


The HTML for these two menus is different. As far as I know, you can’t style <select>and <option> elements to look and behave like <a>s or vice versa. So we need both. You could just put both in the markup. That’s what Five Simple Steps does:


    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
    <option value="" selected="selected">Select</option> 
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 


Let’s go with that for now.


By default we’ll hide the select menu with display: none;. This is actually good for accessibility, as it will hide the redundant menu from screen readers.

nav select {
  display: none;

Then using media queries, we’ll do the switcheroo at some specific width. You can determine that on your own (here’s some standard breakpoints).

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }

But now you gotta maintain two menus?

Well yeah, that’s one concern. Maybe your menus are created dynamically and you can’t control the output easily. Maybe you and hand crafting menus but want to make sure you don’t accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.

Using jQuery, we can do that with just a few lines of code:

// 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");

Then to make the dropdown menu actually work…

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();


CSS nowrap Alternative

To achieve the same results as a TD nowrap (<td nowrap=”true”>) using cascading style sheets, use the following:

white-space: nowrap;

This style attribute only applies at the TD element level ie needs to be applied to each TD, ie not the the TR or TBODY.  If you’re desparate to not apply it to each TD,  then you can get away with only applying it to the TD’s of the first row – but this is only effective if applied to the cells containing thelongest data (so IMHO is a half-baked approach – ie don’t do it).

Floating Header: Scroll Effect using HTML,CSS,JQuery

Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:




<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading