CODEWITHSUNDEEP
javascripthtmlcss
undef
undef

Reputation: 21

drop right menu

I'm looking for a drop-right menu, not dropdown. Based on list of lists, ex html

 <ul>
 <li> item1
 <li> fold1 <ul><li> fold1it1 <li> fold1it2 </ul>
 <li> item2
 <li> fold2 <ul><li> fold2it1 <li> fold2it2 </ul>
 </ul>

When you mousover fold1, it would expand to the right right (drop right)

 item1
 fold1   fold1it1 fold1it2 fold2it3
 item2
 fold2

I'm looking for really simple to understand css example, or some kind of jquery plugin Thanks

Upvotes: 1

Views: 2501

Answers (2)

undef
undef

Reputation: 21

I think I figured it out, I'll still take any suggestions

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">
.dropRight {
    border: 1px solid red;
    display:block;
}

.dropRight ul, .dropRight li {
    margin:0 0 0 0;
    padding:0 0 0 0;
}

.dropRight ul li:hover , .dropRight ul li a:hover {
    background: #dddddd;
}
.dropRight ul {
    list-style-type: none;
    display: inline-block;
}

/* sub lists hidden by default */
.dropRight ul ul {
    visibility: hidden;
    display: none;
}

/* show the sub lists (children) */
.dropRight ul li:hover >ul {
    visibility: visible;
    background:yellow;
    display: inline-block;
}

/* sub list items drop right, not down */
.dropRight ul ul li {
    position: relative;
    float: left;
}

</style>
</head><body>
<div class="dropRight">
 <ul>
 <li> item1
 <li> <a href="#">fold1</a>
  <ul>
   <li> fold1it1
   <li> fold1it2
   <li> <a href="#">fold1it3</a>
  </ul>
 <li> item2
 <li> <a href="#">fold2</a>
  <ul>
   <li> fold2it1
   <li> fold2it2   
   <li> <span title="The Impossible Fold">fold2it3fold1</span>
    <ul>
     <li> fold2it3fold1it1
     <li> fold2it3fold1it2
    </ul>
   <li> <a href="#" title="messed up">fold2it3fold2</span>
    <ul>
     <li> fold2it3fold2it1
     <li> fold2it3fold2it2
    </ul>
  </ul>
 </ul>
</div>
</body></html>

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532595

You might want to look at fgmenu from the Filament Group. Works with jQuery UI themes, in particular the flyout menus. It also appears that future work on jQuery UI menus will be based on this work.

Upvotes: 0

Related Questions