1
Es ist mein erstes mal css code, Wenn Sie mehr Code wollen, bitte fragen Sie mich. Wie ändert man die Aktion "Abtauchen" in eine Aktion "Abschieben"? Ich möchte das Menü am Ende der Seite platzieren. Ich habe viele Dokumente gesucht und keine gute Lösung gefunden.Wie mache ich Slide-Down-Menü, um nach oben zu gleiten?
Danke.
$(document).ready(function() { \t
\t $('#nav li').hover(function() {
\t \t $('ul', this).slideDown(200);
\t \t $(this).children('a:first').addClass("hov");
\t }, function() {
\t \t $('ul', this).slideUp(100);
\t \t $(this).children('a:first').removeClass("hov"); \t \t
\t });
});.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">
\t <ul id="nav">
\t \t <li><a href="#">Homepage</a></li>
\t \t <li><a href="#">About the Mag</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Company</a></li>
\t \t \t \t <li><a href="#">Authors</a></li>
\t \t \t \t <li><a href="#">Write for Us?</a></li>
\t \t \t \t <li><a href="#">Advertising</a></li>
\t \t \t \t <li><a href="#">Get in Touch</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li><a href="#">Freebies</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">PSD</a></li>
\t \t \t \t <li><a href="#">AI Vectors</a></li>
\t \t \t \t <li><a href="#">Patterns</a></li>
\t \t \t \t <li><a href="#">Icons</a></li>
\t \t \t </ul> \t \t \t
\t \t </li>
\t \t <li><a href="#">Tutorials</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">HTML5</a></li>
\t \t \t \t <li><a href="#">CSS3</a></li>
\t \t \t \t <li><a href="#">jQuery</a></li>
\t \t \t \t <li><a href="#">PHP MySQL</a></li>
\t \t \t \t <li><a href="#">Ruby on Rails</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li><a href="#">Web Tools</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Performance</a></li>
\t \t \t \t <li><a href="#">Browser Testing</a></li>
\t \t \t \t <li><a href="#">CMS Plugins</a></li>
\t \t \t \t <li><a href="#">Cheat Sheets</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li><a href="#">Originals</a>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Website Design</a></li>
\t \t \t \t <li><a href="#">Mobile</a></li>
\t \t \t \t <li><a href="#">User Interface</a></li>
\t \t \t \t <li><a href="#">Freelancing</a></li>
\t \t \t \t <li><a href="#">Inspiration</a></li>
\t \t \t </ul>
\t \t </li>
\t </ul>
</div>
</body>
</html>