CODEWITHSUNDEEP
cssnavbar
Avinash
Avinash

Reputation: 33

How to code a Horizontal sub menu instead of drop down

I have a navigation bar with drop down sub-menu's. But how to convert 'drop down' sub-menu's into 'side by side' sub menu's as like in Apple's website. For example if we clicked on "ipad", it shows 'features, 'Built in apps', 'ios'...side by side with one Highlighted.

I want to implement this in my weebly website.

Upvotes: 1

Views: 12275

Answers (1)

Mark
Mark

Reputation: 632

Do you want it to work exactly like on the Apple site?

if so....

On Apple The sub nav that is loaded is a part of the iPad page and not in anyway part of the main menu (as far as the code goes). It is just a seperate horizontal menu that is loaded on that specific page.

So on your site on your first page you would have your main menu only, styled horizontally

<ul id="main-menu">
  <li><a href="page1.html">page one</a></li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

Then on page1.html you would just add an extra menu somewhere below like this...

<ul id="main-menu">
  <li><a href="page1.html">page one</a></li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

<ul id="sub-menu">
  <li><a href="page1_option1.html">option one</a></li>
  <li><a href="page1_option2.html">option two</a></li>
  <li><a href="page1_option3.html">option three</a></li>
  <li><a href="page1_option4.html">option four</a></li>
</ul>

If you want a sub menu that is part of the main menu that is shown when a user hovers on a main menu item you would add a 'ul' menu inside the relevant 'li' of your main menu, like this...

<ul id="main-menu">
  <li id="show-sub-menu"><a href="page1.html">page one</a>
    <ul id="sub-menu-1">
      <li><a href="page1_option1.html">option one</a></li>
      <li><a href="page1_option2.html">option two</a></li>
      <li><a href="page1_option3.html">option three</a></li>
    </ul>
  </li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

Then just style your sub nav to show horizontally like the main menu. You will need to set it to display:none and sho on hover of its parent element, like this...

CSS

#main-menu li ul{
   display:none;
}

#main-menu li#show-sub-menu:hover ul{
   display:block;
}

Upvotes: 1

Related Questions