CODEWITHSUNDEEP
javascriptjqueryhtmlcss
maxisme
maxisme

Reputation: 4245

How to add vertical divs inside horizontal divs

HTML:

<div align="center" id="menu_bar">
    <div class="menu_item"><a href="index">Home</a></div>
    <div class="menu_item art">
         <a href="art">Art</a>
         <a class="photography" href="photography">Photography</a>
         <a class="drawing" href="drawing">Drawing</a>
         <a class="painting" href="painting">Painting</a>
    </div>
    <div class="menu_item"><a href="film">Film</a></div>
    <div class="menu_item"><a href="blog">Blog</a></div>
    <div class="menu_item"><a href="about">About</a></div>
    <div class="menu_item"><a href="contact">Contact</a></div>
</div>

jQuery/CSS:

$('#menu_bar div').css("display","inline");

This jquery puts each div horizontally but I want the .art a tags to be organised vertically so it ends up looking like this:

enter image description here

I have tried adding this:

$('.art').css("display","block");

But this makes the menu look like this:

enter image description here

Which is not what I want.

Please see the JSFiddle of my attempt

Edit:

I have also tried:

$('.art a').css("display","block");

Which has ended up making it look like this:

enter image description here

Getting closer...

Edit 2:

Thank you @Paulie_D is there anyway to prevent this gap (that I highlighted red):

enter image description here

Upvotes: 0

Views: 152

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

A standard ul & li structure would serve you better I'd suggest.

A basic example is as follows. Additional styling is, of course, required but the required layout effect is achieved.

.navbar {} ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.main-menu > li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position:relative
}

.sub-menu {
 position:absolute;
 top:100%;
 left:50%;
 transform:translateX(-50%);
 }

.sub-menu > li {
  text-align: center;
  white-space:nowrap;
  width:auto;
}
<div class="navbar">
  <ul class="main-menu">
    <li><a href="#">Item 1</a>

    </li>
    <li><a href="#">Item 2</a>

      <ul class="sub-menu">
        <li><a href="#">Sub Item 1</a>

        </li>
        <li><a href="#">Sub Item 2</a>

        </li>
        <li><a href="#">Lorem ipsum dolor.</a>

        </li>
        <li><a href="#">Item 4</a>

        </li>
        <li><a href="#">Item 5</a>

        </li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>

    </li>
    <li><a href="#">Item 4</a>

    </li>
    <li><a href="#">Item 5</a>

    </li>
  </ul>
</div>

Upvotes: 0

vorillaz
vorillaz

Reputation: 6266

You don't need JavaScript for such a simple task, just add some a second level menu, wrap around the children and attach a some styles like:

    #menu_bar > .menu_item {
    display: inline-block;
    position:relative;
}
#menu_bar .submenu{
    position: absolute;
    left: 0;
    top: 100%;
}

http://jsfiddle.net/vaop347b/1/

Upvotes: 1

user488187
user488187

Reputation:

An odd arrangement, but you can do it if you set the menu items to float and adjust spacing:

#menu_bar div {
    float: left;
    margin-right: 1em;
}

.art a {
    display: block;
}

#menu_bar div:first-child {
    margin-right: -1.5em;
}

#menu_bar div:nth-of-type(3) {
    margin-left: -2.5em;
}

See Fiddle.

Upvotes: 1

Related Questions