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..
Use css .panel-body { overflow:hidden; } on your container to hide the overflowing content (your image). A more elegant solution can be to automatically resize your images to not overflow...
If you are referring to the jagged edge/mini triangles, then for a simpler time you would be better recreating it the way they have using a repeating http://thegregthompson.com/wp-content/themes/GregThompson/assets/img/border-top.png. I'm sure...
There is no way to do such things in plain CSS. You have to use a CSS preprocessor, for example Sass or Less. Example of nesting selectors in Sass: nav...
That worked because if you notice on the code in the theme preview it says : <body class="**home** page page-id-17 page-template-default res1170" data-twttr-rendered="true"> it would also work if you used...
CSS : h3 { float:left; border: 1px solid grey; padding:10px; margin: 5px; max-width:3em; height:3em; } .bottom { line-height:65px; } HTML : <h3 class="bottom">ABC</h3> <h3>DEF JEH</h3> Try this I think ie....
I have ended up with the following: myApp.directive("formGroup", function ($parse) { return { restrict: "A", scope: { input: "@" }, replace: false, require: "^form", link: function (scope, elem, attrs, ctrl)...
Because the opacity is 1, it's equivalent to the hex format without any opacity. As it says here: In compressed output mode, Sass will output the smallest CSS representation of...
Seems like an inline style would work fine here. In your ERB, in your student divs, just do: <% @students.each do |student| %> <div style="height: <%= student.height %>px; width: <%=...
Percentage Margin of an inner element depends on the size of outer container. see for example left margin of inner div is set 20% for both examples _______________ | ___...
$('div').css({"-webkit-transform":"translate(100px,100px)"}); http://jsfiddle.net/xWCVf/5/...
This is fairly easy to accomplish and what you just seeing there is nothing more than a collection of white div elements masking an animated background which works in this...
You can use float to align the image to the right, combined with margin to place it exactly where needed, then just clear the text below the image. I've commented...
Just use this css: td { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } And the result is like this: http://jsfiddle.net/ongisnade/pghny/...
You can't do that. You could only apply style to the entire <input />. You could use opacity: 0 CSS hacks to replace it with you favorite image and image:hover....
This seems a bit of a janky approach and has a small caveat, but it's pure CSS/ no HTML structure modifications. Essentially, I make the .container the main parent instead...
Fixed: <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> HTML and CSS are real funny when it comes to the <link> property, if even one thing is wrong, the stylesheet won't load...
AFAIK both stylus and sass do not support importing only certain selectors of a file. If you have control over the imported file, though, you could use SASS placeholder selectors...
I just organised your code a bit and it's working now. You should learn how to use jsfiddle (it is very simple) so look at my jsfiddle and learn. http://jsfiddle.net/87ZkC/...
This HTML structure <div class="top-panel"> <div style="margin-top: 3px; margin-left: 15px; width: 89px; float: left;"> <-- Contains FB <div class="links"> <-- Contains the Follow us links </div> You need to...
All !important does is increase specificity. To avoid using !important, all you need to do is increase specificity. In your case, both of your selectors have identical specificity. The issue...
You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this: <div class="grid_17"> <div> <div id="offlinetitle">...</div>...
Where you have this line: var ib = self.name.length; You should be doing this: var ib = self.name().length; This seems to be working just fine when I test it in...
Your css refers to .style2 body, which is looking for a body element contained inside of an element with the .style2 class. If you want to style only body when...
Comma separate them: .btn-primary > i.glyphicon, .btn-primary > span.glyphicon { color: #ffffff; } More info can be found at w3.org about grouping. If you want to 'shortcut' them, you'll need...
Here's how this can be done, and here's a Jsfiddle example as well: HTML <a id="nav-toggle" href="#"><span></span></a> JS document.querySelector( "#nav-toggle" ).addEventListener( "click", function() { this.classList.toggle( "active" ); }); and finally...
If you can consider using jQuery to wrap a div around the buttons, you can use this: jQuery wrap All $( ".q-button" ).wrapAll( "<div class='q-button-wrap' />"); Then you can apply...
Use a combination of Microsoft specific CSS rules to filter IE11: <!doctype html> <html> <head> <title>IE10/11 Media Query Test</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> @media all and (-ms-high-contrast:none) {...
Your code needs a bit of restructuring. Wrap all the divs from #greenSmall to #green in a new .content div. Remove the css property float:left from #green Move the .slides...
In your case, you could use the Adjacent sibling selectors or the General sibling selectors e.g. .apDiv1:hover + .menu1{ opacity: .5;} or .apDiv1:hover ~ .menu1{ opacity: .5;} they'll both work....
Primefaces components are powered by jquery-ui. So the naming convention is based on the naming convention of jquery ui components. Specifically, the class names play an important role in the...