Horizontal menu appears as vertical! ..... how to fix?

33 Posts

andreww Reply #1, 20 years ago

I have learned this manual for creating horizontal menu: http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp – very nice explained and seems to be working. Live example here: http://www.tanfa.co.uk/css/examples/menu/hs7.asp

But!!!! when I plugged this menu in my page, it became vertical: http://www.iland.com.ua/ Anybody now why? Any ideas? I use DropMenu, and call it as:
<div id="menu">
[[DropMenu? &menuName=`topMenu` &startDoc=`0` &levelLimit=`2` &topnavClass=`topmenu` &topdiv =`true` &topdivClass=`menu` ]]
</div>

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 20 years ago

It’s all in the CSS grin

Try these two changes; first make a new setting after #menu ul

#menu ul.topmenu{
width:100%;
}

Then add float:left to the styling for the A and LI tags:

#menu a, #menu ul.topmenu > li {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
float:left;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

33 Posts

andreww Reply #3, 20 years ago

I HAVE SOLVED THIS PROBLEM!!!

I don’t know how to explain this... but... I try...

This (http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp) CSS script works with menu with structure like this:

<div id="menu">
<ul>
  <li>
     <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
  </li>
</ul>

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

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

But MODx generates menu structure like this:

<div id="menu">
<ul>
  <li>
     <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
  </li>

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

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

See the difference? In tanfa’s script we have actually three (3) UL lists in one <div></div> container, when in MODx we have one UL list. So... so it is hard to explain with my bad english, but be sure, this (http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp) script can work with MODx, if you have any questions feel free to ask me. And look at my horizontal menu here: www.iland.com.ua ;-)))

3,975 Posts

Zaigham (aka zi) Reply #4, 20 years ago

Very nice Andreww!

Glad you found the problem and the solution.

Keep up!

regards.

zi

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link