CODEWITHSUNDEEP
javascripthtmlmenu
Meow
Meow

Reputation: 19071

How to move html elements using Javascript?

Is it possible to attach html tag to others using Javascript?

<li> to other <li> ?

For instance, I'm creating dropdown menu. I have div separate from the <ul> tag

<ul>
  <li>menu1</li>
  <li>menu2</li>
</ul>

<div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</div>

When I click, say, a link, then I want sub menu to show up under menu1 so result would be like:

<ul>
  <li>menu1</li>
  <div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
  </div>
</ul>

The reason why I choose <div> to be separated from beginning instead of nested in <li> tag is that if I set the <div> "hide", it hides but it occupies the space and created big space between menu1 and any content below, so my page looks weird like:

mypage
----------------------------
| menu1
|
|                  <------ big open space div is hiding
|             
|
| hello content start here

EDIT

Thanks for the tip guys, I've solved the problem with removing div and have nested <ul> per suggestion. The elements are still being shifted when submenu shows up but used CSS position:absolute and specifying z-index helped.

Upvotes: 0

Views: 1352

Answers (5)

Tomalak
Tomalak

Reputation: 338148

This is usually done via CSS. You have the entire menu pre-created (note that nesting <div> within <ul> is invalid HTML):

<ul class="menu">
  <li>menu1
    <ul class="submenu">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
  </li>
</ul>

and then you declare in CSS:

ul.submenu {
  display: none;
}

Now you can remove or add the "submenu" CSS class from the <ul> through JavaScript, or you set the .style.display property.

Or even more elegantly (but less cross-browser compatible, if you still care for old browsers), entirely without JavaScript through pure CSS:

ul.menu > li:hover ul.submenu {
  display: block;
}
ul.submenu:hover {
  display: block;
}

Upvotes: 2

Raynos
Raynos

Reputation: 169373

<ul>
  <li>menu1</li>
  <div id="submenu1" style="display: none">
     <li>sub1</li>
     <li>sub2</li>
  </div>
  <li>menu2</li>
</ul>

Try it, this will make the div take up no space. if you use visiblity: hidden then it will take up space.

Upvotes: 1

Radomir Dopieralski
Radomir Dopieralski

Reputation: 2585

Usually you put the submenu in another <ul> inside an <li> in your main menu (so that you get valid HTML), and hide it with display: none CSS property and show it on click.

  <ul>
    <li><a href="menu1">menu item 1</a><ul class="submenu">
      <li>sub 1</li>
    </ul></li>
    <li><a hrf="menu2">menu item 2</a></li>
  </u>

Then in your CSS (or added using js):

  ul.submenu {
     display: none;
  }
  a:hover + ul.submenu, ul.submenu:hover {
     display: block;
  }

This one will work on modern browsers without any js! But you can do it with js too, of course.

Upvotes: 2

Anurag
Anurag

Reputation: 141869

This is invalid HTML. A li should be contained in either a ol or a ul element. Change

<div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</div>

to 

<ul id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</ul>

For your main problem, there is no need to put the div (or ideally ul) outside the main ul. When you hide an element by setting its visibility to hidden, it will still take up the empty space. To complete hide it and remove any space it was taking, set the display CSS property to none.

document.getElementById('submenu1').style.display = 'none';

Upvotes: 2

davehauser
davehauser

Reputation: 5944

If you use display: none in your CSS then the hidden element doesn't need any space:

HTML:

<ul>
  <li>menu1
    <ul id="submenu1">
       <li>sub1</li>
       <li>sub2</li>
    </ul>
  </li>
  <li class="active">menu2
    <ul id="submenu1">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
</ul>

CSS:

li ul {
  display: none;
}

li.active {
  display: block;
}

Upvotes: 1

Related Questions