CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenubar
Ali Tabibzadeh
Ali Tabibzadeh

Reputation: 193

Expandable menu box (horizontally)

I was playing around with this idea : enter image description here

In this block I have 2 <a>s as buttons and an <ul> and tried floating them to make them stick together. And the main idea to achieve this effect was manipulation width/display state of ul or simply the menu section. 

<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
  <a class="nav-btn">Logo</a>
</nav>

But my main question is that "How to make the widths to be flexible and automatic?" No, percentages or pixels! The main section(grey background) should expand/and collapse automatically and take as much space as needed based on its content. And when the menu is toggled off and hypothetically we set the width of "Menu" to zero, the background should adjust and those two buttons should be like the picture.

What structure or html do you suggest?

Much Appreciated!

Upvotes: 0

Views: 1159

Answers (1)

dreamlab
dreamlab

Reputation: 3361

you can use the html structure as is. you will have set the following css properties to get the basic layout set up:

a, li {
  display: block;
  float: left;
}

than you can toggle the display property of the <ul> via javascript. see: js FIDDLE

you can also use the nav's hover state to toggle the li's visibility via css

ul {
    display: none;
}

nav:hover ul {
    display: block;
}

see: css FIDDLE

if the logo's are not links you might want to use div's instead of a's.

Upvotes: 1

Related Questions