How to make slide down menu to slide up?
Question
It is my first time put css code, If you want more code,please ask me. How to change the slide down action to a slide up action? I want to put the menu on the bottom of the page. I have search a lot of documents and didn't find a good solution.
Thanks.
$(document).ready(function() { $('#nav li').hover(function() { $('ul', this).slideDown(200); $(this).children('a:first').addClass("hov"); }, function() { $('ul', this).slideUp(100); $(this).children('a:first').removeClass("hov"); }); });
.wrap { width: 800px; margin: 0 auto; } /* @group core nav menu */ #nav { position: fixed; bottom: 50%; width: 100%; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; } #nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; } #nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; } #nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; } /* @group subnav */ #nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); padding-bottom: 3px; } #nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; } #nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; } #nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; } #nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DesignShack Sexy Magazine-Style Dropdown Menu</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body> <div class="wrap"> <ul id="nav"> <li><a href="#">Homepage</a></li> <li><a href="#">About the Mag</a> <ul> <li><a href="#">Company</a></li> <li><a href="#">Authors</a></li> <li><a href="#">Write for Us?</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Get in Touch</a></li> </ul> </li> <li><a href="#">Freebies</a> <ul> <li><a href="#">PSD</a></li> <li><a href="#">AI Vectors</a></li> <li><a href="#">Patterns</a></li> <li><a href="#">Icons</a></li> </ul> </li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP MySQL</a></li> <li><a href="#">Ruby on Rails</a></li> </ul> </li> <li><a href="#">Web Tools</a> <ul> <li><a href="#">Performance</a></li> <li><a href="#">Browser Testing</a></li> <li><a href="#">CMS Plugins</a></li> <li><a href="#">Cheat Sheets</a></li> </ul> </li> <li><a href="#">Originals</a> <ul> <li><a href="#">Website Design</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">User Interface</a></li> <li><a href="#">Freelancing</a></li> <li><a href="#">Inspiration</a></li> </ul> </li> </ul> </div> </body> </html>
2 answers
solution1
1 2016-05-12 17:52:27
You mean something like this ?
I've changed the bottom value of #nav ul to 50px
solution2
1 ACCPTED 2016-05-12 17:57:01
recently I have come across such problems, lucily I found the key point.
You just need to add a simple line of code into the Css style sheet, to change the default direction of pop up menu, I think.
The line I added in your #nav.ul style means the bottom position of the pop up menu, that makes your menu pop up upwards.
Good luck with your further study.
$(document).ready(function() { $('#nav li').hover(function() { $('ul', this).slideDown(200); $(this).children('a:first').addClass("hov"); }, function() { $('ul', this).slideUp(100); $(this).children('a:first').removeClass("hov"); }); });
.wrap { width: 800px; margin: 0 auto; } /* @group core nav menu */ #nav { position: fixed; bottom: 50%; width: 100%; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; } #nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; } #nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; } #nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; } /* @group subnav */ #nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; ***bottom: 50;*** list-style: none; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); padding-bottom: 3px; } #nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; } #nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; } #nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; } #nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DesignShack Sexy Magazine-Style Dropdown Menu</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body> <div class="wrap"> <ul id="nav"> <li><a href="#">Homepage</a></li> <li><a href="#">About the Mag</a> <ul> <li><a href="#">Company</a></li> <li><a href="#">Authors</a></li> <li><a href="#">Write for Us?</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Get in Touch</a></li> </ul> </li> <li><a href="#">Freebies</a> <ul> <li><a href="#">PSD</a></li> <li><a href="#">AI Vectors</a></li> <li><a href="#">Patterns</a></li> <li><a href="#">Icons</a></li> </ul> </li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP MySQL</a></li> <li><a href="#">Ruby on Rails</a></li> </ul> </li> <li><a href="#">Web Tools</a> <ul> <li><a href="#">Performance</a></li> <li><a href="#">Browser Testing</a></li> <li><a href="#">CMS Plugins</a></li> <li><a href="#">Cheat Sheets</a></li> </ul> </li> <li><a href="#">Originals</a> <ul> <li><a href="#">Website Design</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">User Interface</a></li> <li><a href="#">Freelancing</a></li> <li><a href="#">Inspiration</a></li> </ul> </li> </ul> </div> </body> </html>
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.
Related Question
Make Menu Slide Up and Down
How to make a slide(up/down) without jQuery?
slide up and slide down
Accordion Menu - How do I know that it will slide up or down?
Menu drawer toggle (slide up/down)
Slide menu item down and up on click
How to make a list component slide down after a dropdown menu is triggered?
How can I make this div slide up and down hover effect?
how to make this slide menu work
Slide down burger menu
Related Tags