CODEWITHSUNDEEP
htmlcss
GXCPL.Official
GXCPL.Official

Reputation: 279

Converting an existing menu into responsive menu

My site navigation menu is coded as follows:

The HTML Code:

<div class="menu">
    <ul>
        <li class="active"><a href="#" class="btn">Home</a></li>
        <li class="inactive"><a href="#" class="btn">About</a></li>
        <li class="inactive"><a href="#" class="btn">Post Your Ad</a></li>
        <li class="inactive"><a href="#" class="btn">Tenders</a></li>
        <li class="inactive"><a href="#" class="btn">Contact Us</a></li>
        <li class="inactive"><a href="#" class="btn">FAQ</a></li>
    </ul>
</div>

The CSS Code:

    .menu {
    height: 100px;
    z-index: 999;
}

.menu li {
    display: inline;
    float: left;
    width: auto;
}

.menu ul {
    margin-top: 2px;
}           

.menu a {
    text-decoration : none;
    font-size: 15px;
    color: #ffffff;
}

.menu li:hover {
       background-color: #16a085;
}

.active , .inactive {
    width: 83%;
}

.active {
    background-color: #16a085;
}

.inactive {
    background-color: #34495e;
}

/* Navigation Button */
.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-size: 22px;
  background: #34495e;
  padding: 48px 40px 31px 40px;
  text-decoration: none;
}

.btn:hover {
  background: #16a085;
  text-decoration: none;
}

The JSFiddle is at: http://jsfiddle.net/VCKwN/

PROBLEM DEFINITION:

How can i convert the existing menu, keeping its all styles as is, into a responsive menu for a mobile site?

When the screen size reduces, the menu should get hidden, and a button should appear. clicking on the button the menu should reappear.

Is this possible?

Upvotes: 0

Views: 3817

Answers (2)

Nick R
Nick R

Reputation: 7784

You could do something like this - JSFiddle Demo

Javascript

var menu = document.getElementById('menu');

document.getElementById('open-menu').onclick = function() {
    menu.classList.toggle('show');
}

CSS:

We hide the mobile menu button initially. And there's a media-query that overrides a few of the menu styles when it's below 480px wide. (Setting the menu items to display block etc;)

.mobile-menu { display:none; }


  @media only screen and (max-width: 480px) {

    .mobile-menu { display:inline-block; padding:5px; background:#ccc; border:1px solid #000;}
    .menu { display:none; }
    .menu ul { height:auto;}
    .menu ul li,
    .menu ul li a { float:none; display:block }
    .menu ul li a { padding:15px 6px;}

    .show { display:block; }
  }

Upvotes: 1

WhiteLine
WhiteLine

Reputation: 1991

  • div with width:100%
  • use the media queries to control the size of the screen
  • create a button and put it hidden, then with media queries display it and hide the div-menu

take a look at responsive bootstrap menu , so you can make an idea

Upvotes: 0

Related Questions