How to make slide down menu to slide up?


Tags: javascript,html,css

Problem :

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>



Solution :

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>


    CSS Howto..

    how to limit the size of image that gets submitted with a box

    How can I make this kind of a border?

    How to reference CSS children [duplicate]

    How to add CSS to a specific div class - WordPress

    CSS How to I align a header with a height of 2em to the bottom

    How to Write an Angular directive to update CSS class based on form validation

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    How to use 'dynamic CSS' in Rails

    Percentages in CSS: How are they calculated internally?

    How to animate CSS Translate

    How does Facebook generate the animated placeholder news items?

    How to position my image below and to the right of my text?

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    How apply CSS to browse button

    How to prevent an absolutely positioned element to affect the scrollbar?

    How do I get text in my html page to display features using the css stylesheet?

    How to @import without including all CSS but just the @extends ones

    Slideshow using MooTools JavaScript - How can I position slideshow to rescale in browser window

    How to control the HTML area to the right?

    How do I avoid using !important?

    CSS How to use margins with different divs

    knockout.js how to bind dynamic css

    How can I toggle the background color of the body of my HTML document, with one button?

    How to write multiple css selectors in one line?

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    How to center two elements which are separately wrapped in ?

    How to write a CSS hack for IE 11? [duplicate]

    How to make div move to bottom of page

    HTML/CSS: How to change image opacity when the text over it is Mouseovered?

    How do JSF/PrimeFaces tags get resolved to default CSS styles?