如何使下拉菜单向上滑动？

Question

It is my first time put css code, If you want more code,please ask me. 这是我第一次输入CSS代码，如果您想要更多代码，请问我。 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>

Answer 1

You mean something like this ? 你的意思是这样的吗？

I've changed the bottom value of #nav ul to 50px 我已将#nav ul的底值更改为50px

Answer 2

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. 我认为，您只需要在Css样式表中添加简单的代码行，即可更改弹出菜单的默认方向。

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. 我以＃nav.ul样式添加的行表示弹出菜单的底部位置，这使菜单向上弹出。

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>

如何使下拉菜单向上滑动？

问题描述

2 个解决方案

解决方案1
1 2016-05-12 17:52:27

解决方案2
1 已采纳 2016-05-12 17:57:01

如何使下拉菜单向上滑动？

问题描述

2 个解决方案

解决方案1 1 2016-05-12 17:52:27

解决方案2 1 已采纳 2016-05-12 17:57:01

解决方案1
1 2016-05-12 17:52:27

解决方案2
1 已采纳 2016-05-12 17:57:01