CODEWITHSUNDEEP
jqueryhtmlcss
mithrandir
mithrandir

Reputation: 191

Space for a dropdown menu - HTML5/CSS3

I have this dropdown menu:

The problem is that in mobile view, I have to reserve the space because when someone clicks the menu, if I don't reserve the space, the login and the li from the menu will merge

How can I solve this?

Thank you

Upvotes: 0

Views: 86

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

In your live code, just remove the space. As the user doesn't look at the menu as well as type in the credentials at the same time!

You can make the drop-down push the contents in the mobile view. I am definitely sure it is not a good idea to have fixed headers for menus in mobile view. So, you may have a look at this working demo like this:

$(document).ready(function () {
  $("header a").click(function () {
    $(this).next().slideToggle();
    return false;
  });
});
* {font-family: Segoe UI;}
body, ul, li {margin: 0; padding: 0; list-style: none;}
.wrap {width: 285px; margin: 15px auto; border: 5px solid rgba(0,0,0,0.75); box-shadow: 0 0 5px 2px #000;}
header {background-color: #000; text-align: center;}
header a {color: #fff; text-decoration: none; display: block; padding: 5px;}
img {display: block; width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
  <header>
    <a href="#">Click for Menu</a>
    <ul class="menu" style="display: none;">
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a></li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li><a href="">Item 5</a></li>
    </ul>
  </header>
  <img src="http://i.imgur.com/IJhK0iG.jpg?1" alt="Login" />      
</div>

Upvotes: 1

Related Questions