So I've made some drop down menus. The drop downs are ul nested in li. For style reasons I need have the drop down height set to 0px with some padding when the page first loads. All my drop downs have different heights. When I put 100% in as the height to animate too, it does not work.
Here is a link: http://www.jasonfoumberg.com/test/writing.html
How do I get the drop downs to animate to the proper height. Each drop down has a different number of items.
jQuery
$(document).ready(function () {
var defHeight = $('ul:first', this).height();
console.log(defHeight);
$("ul li").hover(
function () {
$('ul:first', this).animate({
height: "100%"
});
}, function () {
$('ul:first', this).animate({
height: "0px"
});
});
});
HTML
<div id="mainWrapperContent">
<div id="writingMenu">
<ul>
<li><a href="">critical reviews</a>
<ul>
<li><a href="">frieze</a></li>
<li><a href="">Modern Painters</a></li>
<li><a href="">photograph</a></li>
<li><a href="">sculpture</a></li>
<li><a href="">NewCity</a></li>
</ul>
</li>
<li><a href="">Exhibition Catalogs</a>
<ul>
<li><a href="">Catalog One</a></li>
<li><a href="">Catalog Two</a></li>
<li><a href="">Catalog Three</a></li>
<li><a href="">Catalog Four</a></li>
<li><a href="">Catalog Five</a></li>
</ul>
</li>
<li><a href="">BreakOut Artists</a>
<ul>
<li><a href="">2012</a></li>
<li><a href="">2011</a></li>
<li><a href="">2010</a></li>
<li><a href="">2009</a></li>
<li><a href="">2008</a></li>
</ul>
</li>
<li><a href="">Cover Stories</a>
<ul>
<li><a href="">Catalog One</a></li>
<li><a href="">Catalog Two</a></li>
<li><a href="">Catalog Three</a></li>
<li><a href="">Catalog Four</a></li>
<li><a href="">Catalog Five</a></li>
<li><a href="">Catalog One</a></li>
<li><a href="">Catalog Two</a></li>
<li><a href="">Catalog Three</a></li>
<li><a href="">Catalog Four</a></li>
<li><a href="">Catalog Five</a></li>
</ul>
</li>
</ul>
</div><!-- writing Menu -->
</div><!-- mainWrapper Content -->
CSS
#writingMenu a {
margin: 0px 0px 0px 0px;
padding: 12px 5px 5px 5px;
text-align: right;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
background: #ffffff;
color: #B3B3B3;
min-width: 140px !important;
display: block;
}
#writingMenu a:hover {
color: #37342e;
}
#writingMenu ul li ul {
position: absolute;
width: 90%;
float: left;
overflow: hidden;
border-left: thin solid black;
border-bottom: thin solid black;
border-right: thin solid black;
margin-left: -5px;
padding-top: 5px;
background-image: url(images/speckled_backgrounddk.jpg);
display: block;
height: 0px;
}
#writingMenu ul li ul li {
background-image: none;
float: none;
}
#writingMenu ul li ul a {
margin: 0px;
padding: 0px;
text-align: left;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: #B3B3B3;
background-color: transparent;
background-image: none;
text-transform: lowercase;
color: #999999;
}
$(document).ready(function() {
var defHeight = $('ul:first',this).height();
console.log(defHeight);
$("ul li").hover(
function () {
$('ul:first',this).stop().animate({height : "toggle"});
},
function () {
$('ul:first',this).stop().animate({height : "toggle"});
});
});
Havent tried but this should work
I'vde made a css-only based dd menu if you're interested...
HTML =>
<!-- by rocky -->
<div id="wrapper">
<div id='navMenu'>
<ul>
<li><a href="#">Menu1</a>
<ul>
<li><a href="#">Dropdown1</a></li>
<li><a href="#">Dropdown2</a></li>
<li id="submenu"><a href="#">Dropdown3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
</ul> <!-- End of Menu1-->
</li> <!-- Menu2 -->
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">Dropdown2</a> </li>
<li id="submenu"><a href="#">Dropdown2</a>
<ul>
<li><a href="#">Dropdown2</a></li>
</ul>
</li>
<li><a href="#">Dropdown2</a></li>
</ul> <!-- End Inner UL -->
</li> <!-- ABOUT -->
<li><a href="#">Menu3</a>
<ul>
<li><a href="#">Submenu3</a></li>
<li id="submenu"><a href="#">Submenu3</a>
<ul>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
</ul> <!-- End Inner UL -->
</li> <!-- End main LI -->
</ul> <!-- End main UL -->
</div> <!-- End Nav -->
</div> <!-- End wrapper -->
And the CSS:
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul{
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu ul li ul a:hover {
color: #999;
}
#navMenu ul ul li#submenu ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navMenu ul ul li#submenu:hover ul {
margin-top: -30px;
margin-left: 105px;
visibility: visible;
}
There is a demo here: http://dbwebb.se/style/?id=152
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.