float's not returing to position after mobile view end - javascript

On my menu when I am in mobile view the it does not float which is correct.
Problem being when I come out of the mobile view my class "menu-right" floats left until I reload my page.
Is it possible so when it comes out of mobile view that the "menu-right" class will automatically go to the float right with out me reloading page.
I am not sure if it's to do with the css or my java script.
Live Code Example: http://codepen.io/riwakawebsitedesigns/pen/GgLjmL
Live Code Full View: http://codepen.io/riwakawebsitedesigns/full/GgLjmL/
Java Script
var ww = document.body.clientWidth;
$(document).ready(function() {
$("#menu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".menu-toggle").click(function(e) {
e.preventDefault();
$(this).toggleClass("menu-button");
$("#menu").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".menu-toggle").css("display", "inline-block");
if (!$(".menu-toggle").hasClass("menu-button")) {
$("#menu").hide();
} else {
$("#menu").show();
}
$("#menu li").unbind('mouseenter mouseleave');
$("#menu li a.parent").unbind('hover').bind('hover', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
$(".menu-right").removeClass("menu-right");
}
else if (ww >= 768) {
$(".menu-toggle").css("display", "none");
$("#menu").show();
$("#menu li").removeClass("hover");
$("#menu li a").unbind('hover');
$("#menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
$(".menu-right").addClass("menu-right");
}
}
CSS
body {
background-color: #f5f5f5;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#content {
margin-top: 20px;
}
.default-theme {
background-color: #fafafa !important;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2) !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)) !important;
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2) !important;
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2) !important;
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2) !important;
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
}
body,
#menu,
ul,
li,
a {
margin: 0;
padding: 0;
}
a,
a:visited {
color: #003366;
text-decoration: none;
cursor: pointer;
}
#header .div1 {
height: 56px;
padding: 0px 30px;
background: url('../img/header.png') repeat-x;
min-width: 900px;
}
#header .div2 {
color: #FFFFFF;
padding: 18px 0px 0px 0px;
float: left;
}
#header .div3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-align: right;
padding: 15px 0px 0px 0px;
float: right;
}
#header .div2 span {
font-weight: bold;
}
.container-menu {
width: 100%;
margin: 0 auto;
}
.menu-right {
float:right !important;
}
.menu-toggle {
display: none;
}
#menu {
list-style: none;
*zoom: 1;
background: rgba(0,0,0,1);
background: rgba(19,19,19,1);
background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));
background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#1c1c1c', GradientType=0 );
}
#menu:before,
#menu:after {
content: " ";
display: table;
}
#menu:after {
clear: both;
}
#menu ul {
list-style: none;
}
#menu a {
padding: 10px 15px;
color:#fff;
text-decoration: none
}
#menu li {
position: relative;
}
#menu > li {
float: left;
}
#menu > li > a {
display: block;
}
#menu li ul {
position: absolute;
left: -9999px;
}
#menu > li.hover > ul {
left: 0;
}
#menu li li.hover ul {
left: 100%;
top: 0;
}
#menu ul .top {
background-image: url('../img/arrow-right.png');
background-position: 95% center;
background-repeat:no-repeat;
}
#menu li li a {
display: block;
background: #000000; /* A grey background */
opacity: 0.7; /* 80% opacity */
position: relative;
z-index:100;
width: 147px;
}
#menu li li li a {
background: #000000; /* A grey background */
opacity: 0.7; /* 80% opacity */
z-index:200;
}
#menu li li li a:hover,
#menu li li a:hover {
margin: 0px;
border: 1px solid #BD4C14;
background-color: #391706;
}
#media screen and (max-width: 768px) {
#menu-header {
background: rgba(0,0,0,1);
background: rgba(19,19,19,1);
background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));
background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#1c1c1c', GradientType=0 );
width: 100%;
padding-top: 2%;
}
#menu-header button {
color: #FFF;
border-color: 1px solid #FFF !important;
margin-bottom: 15px;
margin-left: 10px;
}
#menu {
background: #000000 !important;
clear: both;
}
#menu > li {
float: none;
}
#menu li li a {
width: 100%;
}
#menu ul {
display: block;
width: 100%;
}
#menu > li.hover > ul , #menu li li.hover ul {
position: static;
}
}
HTML
<div class="container-menu">
<div id="menu-header">
<button type="button" class="menu-toggle btn btn-primary">
Menu
</button>
</div>
<ul id="menu">
<li>Dashboard</li>
<li>Catalog
<ul>
<li>Categories</li>
<li>Categories</li>
</ul>
</li>
<li>Extensions
<ul>
<li>Modules</li>
</ul>
</li>
<li>Sales
<ul>
<li>Customers
<ul>
<li>Customers</li>
<li>Customer Group</li>
</ul>
</li>
</ul>
</li>
<li>System
<ul>
<li>Setting</li>
<li>Design
<ul>
<li>Layouts</li>
<li>Banners</li>
</ul>
</li>
<li>Users
<ul>
<li>User</li>
<li>User Group</li>
</ul>
</li>
</ul>
</li>
<li class="menu-right">Logout</li>
<li class="menu-right">Website Front</li>
</ul>
</div>


You have to create a media screen like:
#media screen and (min-width: 769px) {}
and reset all the style changed with:
#media screen and (max-width: 768px) {}
#media (min-width: 769px) {
h1 {color: red;}
}
#media (max-width: 768px) {
h1 {color: green;}
}
<html>
<head>
</head>
<body>
<h1>Color</h1>
<script>
</script>
</body>
</html>

Related

Want to be able to have dropdown menus through a chrome extension using javascript, but I can't seems to make them work like they do in the .html

I have been trying for a while now. I have a popup.html file which contains the css and html, and a popup.js which contains the javascript since I know chrome does not like inline js. The popup windows work well on the .html file opened through a browser but I cannot get them to work in the chrome extension.
This is the popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Container holding the image and the text */
#wrapper{
margin-left:0px;
margin-right:auto;
width:960px;
}
.header{
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:absolute;
top:27px;
left:30px;
background-color:white;
color:grey;
}
.container {
position: relative;
color: white;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.top-left {/*Degree Audit*/
position: absolute;
top: 100px;
left: 105px;
}
.top-right {/*Course Selection*/
position: absolute;
top: 100px;
right: 500px;
}
.bottom-left { /*Plan*/
position: absolute;
bottom: 15px;
left: 70px;
}
.bottom-centered {/*Search*/
position: absolute;
bottom: 15px;
right: 650px;
}
.bottom-right {/*Enroll*/
position: absolute;
bottom: 15px;
right: 460px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dropbtnSearch {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #000080);
background-image: -moz-linear-gradient(top, #3498db, #000080);
background-image: -ms-linear-gradient(top, #3498db, #000080);
background-image: -o-linear-gradient(top, #3498db, #000080);
background-image: linear-gradient(to bottom, #3498db, #000080);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 4px 8px 4px 8px;
border: solid #ffda7d 2px;
text-decoration: none;
position:absolute;
bottom:20px;
left:65px;
}
.dropbtnPlan {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #000080);
background-image: -moz-linear-gradient(top, #3498db, #000080);
background-image: -ms-linear-gradient(top, #3498db, #000080);
background-image: -o-linear-gradient(top, #3498db, #000080);
background-image: linear-gradient(to bottom, #3498db, #000080);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 4px 8px 4px 8px;
border: solid #ffda7d 2px;
text-decoration: none;
bottom:20px;
left:212px;
position:absolute;
}
.dropbtnPlan:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -moz-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -ms-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -o-linear-gradient(top, #3cb0fd, #ffd736);
background-image: linear-gradient(to bottom, #3cb0fd, #ffd736);
text-decoration: none;
}
.dropbtnSearch:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -moz-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -ms-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -o-linear-gradient(top, #3cb0fd, #ffd736);
background-image: linear-gradient(to bottom, #3cb0fd, #ffd736);
text-decoration: none;
}
.dropbtnAudit:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -moz-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -ms-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -o-linear-gradient(top, #3cb0fd, #ffd736);
background-image: linear-gradient(to bottom, #3cb0fd, #ffd736);
text-decoration: none;
}
.dropbtnSelection:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -moz-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -ms-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -o-linear-gradient(top, #3cb0fd, #ffd736);
background-image: linear-gradient(to bottom, #3cb0fd, #ffd736);
text-decoration: none;
}
.dropbtnEnroll {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #000080);
background-image: -moz-linear-gradient(top, #3498db, #000080);
background-image: -ms-linear-gradient(top, #3498db, #000080);
background-image: -o-linear-gradient(top, #3498db, #000080);
background-image: linear-gradient(to bottom, #3498db, #000080);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 4px 8px 4px 8px;
border: solid #ffda7d 2px;
text-decoration: none;
bottom:30px;
position:absolute;
bottom:20px;
left:370px;
}
.dropbtnEnroll:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -moz-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -ms-linear-gradient(top, #3cb0fd, #ffd736);
background-image: -o-linear-gradient(top, #3cb0fd, #ffd736);
background-image: linear-gradient(to bottom, #3cb0fd, #ffd736);
text-decoration: none;
}
.dropbtnAudit {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #000080);
background-image: -moz-linear-gradient(top, #3498db, #000080);
background-image: -ms-linear-gradient(top, #3498db, #000080);
background-image: -o-linear-gradient(top, #3498db, #000080);
background-image: linear-gradient(to bottom, #3498db, #000080);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Georgia;
color: #ffffff;
font-size: 16px;
padding: 4px 16px 4px 16px;
border: solid #ffda7d 2px;
text-decoration: none;
position:absolute;
bottom:60px;
left:135px;
}
.dropbtnSelection {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #000080);
background-image: -moz-linear-gradient(top, #3498db, #000080);
background-image: -ms-linear-gradient(top, #3498db, #000080);
background-image: -o-linear-gradient(top, #3498db, #000080);
background-image: linear-gradient(to bottom, #3498db, #000080);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Georgia;
color: #ffffff;
font-size: 16px;
padding: 2px 30px 2px 30px;
border: solid #ffda7d 2px;
text-decoration: none;
position:absolute;
bottom:60px;
left:255px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-contentSearch {
display: none;
position: absolute;
background-image:url(searchTest.jpg);
background-repeat:no-repeat;
min-width: 506px;
min-height:537px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentPlan {
display: none;
position: absolute;
background-color: #00E5FF;
min-width: 600px;
min-height:600px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentEnroll {
display: none;
position: absolute;
background-color: #00E5FF;
min-width: 600px;
min-height:600px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentAudit {
display: none;
position: absolute;
background-color: #00E5FF;
min-width: 600px;
min-height:600px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentSelection {
display: none;
position: absolute;
background-color: #00E5FF;
min-width: 600px;
min-height:600px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*<div class="bottom-left">
<button onclick="myFunction()" class="dropbtn">Search</button>
<div id="myDropdown" class="dropdown-content">
Course Name
Requirements
etc
</div>
<div class="bottom-left">Search</div>
<div class="top-left">Degree Audit</div>
<div class="top-right">Course Selection</div>
<div class="bottom-right">Enroll</div>
<div class="bottom-centered">Plan</div>
<div class="centered"></div>
*/
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<div class="container">
<img src="kittyPathTesting.jpg" alt="kittyPath" width="500" height="181">
</div>
<div class="dropdown">
<button onclick="searchFunc()" class="dropbtnSearch">Search</button>
<div id="myDropdownSearch" class="dropdown-contentSearch">
<div class="header">
<div class="search_bar">
<input type="text" name="search" placeholder="Enter your search here">
</div>
</div>
</div>
<div class="dropdown">
<button id="testing" onclick="planFunc()" class="dropbtnPlan">Plan</button>
<div id="myDropdownPlan" class="dropdown-contentPlan">
Sup<br>
<img src="na.jpg" alt="Na">
More bullshit<br>
Here click this to plan your schedule mofo<br>
</div>
</div>
<div class="dropdown">
<button onclick="enrollFunc()" class="dropbtnEnroll">Enroll</button>
<div id="myDropdownEnroll" class="dropdown-contentEnroll">
Sup<br>
<img src="na.jpg" alt="Na">
More bullshit<br>
Here click this to plan your schedule mofo<br>
</div>
</div>
<div class="dropdown">
<button onclick="auditFunc()" class="dropbtnAudit">Degree Audit</button>
<div id="myDropdownAudit" class="dropdown-contentAudit">
Sup<br>
<img src="na.jpg" alt="Na">
More bullshit<br>
Here click this to plan your schedule mofo<br>
</div>
</div>
<div class="dropdown">
<button onclick="selectionFunc()" class="dropbtnSelection">Course Selection</button>
<div id="myDropdownSelection" class="dropdown-contentSelection">
Sup<br>
<img src="na.jpg" alt="Na">
More bullshit<br>
Here click this to plan your schedule mofo<br>
</div>
</div>
<script src="popup.js"></script>
</body>
</div>
</html>
and the popup.js:
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if(!event.target.matches('.dropbtnPlan')) {
var dropdowns = document.getElementsByClassName("dropdown-contentPlan");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
else if (!event.target.matches('.dropbtnSearch')) {
var dropdowns = document.getElementsByClassName("dropdown-contentSearch");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
if(!event.target.matches('.dropbtnEnroll')) {
var dropdowns = document.getElementsByClassName("dropdown-contentEnroll");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
if(!event.target.matches('.dropbtnAudit')) {
var dropdowns = document.getElementsByClassName("dropdown-contentAudit");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
if(!event.target.matches('.dropbtnSelection')) {
var dropdowns = document.getElementsByClassName("dropdown-contentSelection");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById(".dropdown-contentPlan button").addEventListener("click", planFunc);
planFunc.preventDefault();
}
);
function searchFunc() {
document.getElementById("myDropdownSearch").classList.toggle("show");
}
function planFunc() {
document.getElementById("myDropdownPlan").classList.toggle("show");
}
function enrollFunc() {
document.getElementById("myDropdownEnroll").classList.toggle("show");
}
function auditFunc() {
document.getElementById("myDropdownAudit").classList.toggle("show");
}
function selectionFunc() {
document.getElementById("myDropdownSelection").classList.toggle("show");
}
function main() {
var source = document.getElementById('myDropdownSelection').value;
document.getElementById(".dropbtnSelection").innerHTML = source;
}

Create a DIV onclick

I have a div and a button which are laid out fine. When I click the button, how can I make the same div spawn again and again. I have tried adding an onclick function but I do not know how I would implement adding the div to it.
HTML
<div class="note" contenteditable="true">
<span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select
</div>
<a href='#' class='button'>Create Note</a>
Javascript
<script type="text/javascript">
$(function() {
$(".note").resizable();
$(".note").keyup(function() {
$(this).css('height', '100%');
});
$(".note").draggable()
.click(function() {
$(this).draggable({
disabled: false
});
}).dblclick(function() {
$(this).draggable({
disabled: true
});
});
});
</script>
CSS
.note {
width: 280px;
height: 100px;
padding-top: 40px;
margin-top: 60px;
margin-left: 35px;
word-break: break-word;
font-family: Note;
font-size: 30px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}

Here is a simple example of how you can use jQuery accomplish what it is you're trying to do. Obviously this is not exactly tailored to your needs, but will give the basis for you to learn how it might work. You're likely going to want to look at the jQuery Clone method and jQuery AppendTo method.
CSS
.note {
margin-bottom: 10px;
background-color: yellow;
width: 100px;
height: 100px;
}
jQuery
$(function() {
$('button').on('click', function() {
$('.note:last').clone().appendTo('.wrapper');
});
});
HTML
<div class="wrapper">
<div class="note">Content in div</div>
</div>
<button>Add note</button>
JSFiddle Example

Do you mean something like this?
$(window).ready(function(){
$('.button').click(function(e){
e.preventDefault();
var html = $('.template').html();
$('#notes').append('<div style="position:relative;">'+html+'<div>');
});
})
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notes">
<div class="template" style="position:relative;">
<div class="note" contenteditable="true"> <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select</div>
</div>
</div>
<a href='#' class='button'>Create Note</a>

Jquery once selected another button disabled

Fiddle Here
Below is my function. I'm getting multiple select while clicking the button. Once I click one button need to selected and another button should be disabled.
Jquery/Javascript
function approvalpersonclick(getstaffiD) {
$('#' + getstaffiD).css({'background': '#5CADE5', 'border': 'none'});
$('.clicked').css({'opacity': '0.6'});
$('#ApprvlPerson').val(getstaffiD);
}
Where I'm going wrong?

You can use jQuery event handlers like
jQuery(function($) {
$('.radioapprovalpersons').on('click', 'li:not(.selected) a', function() {
$(this).parent().addClass('selected').removeClass('disabled');
$('.clicked').not(this).parent().addClass('disabled').removeClass('selected');
$('#ApprvlPerson').val($(this).data('id'));
})
})
ul.radioapprovalpersons {
list-style-type: none !important;
margin: 0;
padding: 0;
width: 280px;
}
ul.radioapprovalpersons li {
display: inline-table;
}
ul.radioapprovalpersons li.selected a {
background: #5CADE5;
border: none;
}
ul.radioapprovalpersons li.disabled a {
opacity: 0.6;
}
.a_sub {
text-align: center;
margin-top: 5px;
margin: 5px auto;
display: block;
float: none;
max-width: 30px;
min-width: 30px;
background: #dadada;
background: -moz-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(49%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #dbdbdb 49%, #d1d1d1 51%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
line-height: 20px;
border-radius: 3px;
border: 1px solid #c2c2c2;
padding: 0 5px;
font: normal 11px/20px Tahoma, Geneva, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="radioapprovalpersons">
<li>ONE</li>
<li>TWO</li>
<li>ThREE</li>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX</li>
</ul>
Demo: Fiddle

Try This JQuery
$('li a').click(function(){
$("li a").not(this).replaceWith(function() { var text =$(this).text(); return "<p class='a_sub clicked'>"+text+"</p>"});
});
FIDDLE

keep website menu on screen when scrolling

I am trying to make it so my drop down menu will stay on the top of the screen (so no matter how far you scroll down the site menu is always at the top) when scrolling down on my website. This is the css and menu I am using for my website. Can someone PLEASE help me I have tried for days to accomplish this with no success.
<style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu: after, #cssmenu ul: after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #FF0000;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #000;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #000 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #000 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
-webkit-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
filter: none;
}
#cssmenu > ul > li.active a: hover {
background: -moz-linear-gradient(top, #000 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #000;
-moz-box-shadow: inset 0 0 0 1px #000;
-webkit-box-shadow: inset 0 0 0 1px #000;
background: #000 url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a: hover {
background: #000 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #c 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
filter: none;
}
#cssmenu > ul > li: first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #000;
}
#cssmenu > ul > li: last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub: hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #000;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
</style>
<div id='cssmenu'>
<ul>
<li class='Stream Portal'><a href="./home.html" >Home</a>
</li>
<li class='has-sub'><a href="./home.html" >TV</a>
<ul>
<li><a href="./justintv.html" >Justin</a></li>
<li><a href="http://lmtv.us/#" >LM</a></li>
<li><a href="http://www.mtv.com/ontv/" >MTV</a></li>
<li><a href="http://www.spike.com/episodes" >Spike</a></li>
<li><a href="http://www.cartoon-world.tv/cartoon-list/" >Toon</a></li>
<li><a href="./tubtub.html" >TubTub</a></li>
<li class='last'><a href="shows" >Veetle</a></li>
</ul>
</li>
<li class='has-sub'><a href="./home.html" >Movies</a>
<ul>
<li><a href="./moviesearchframe.html" >Movie Search</a></li>
<li><a href="http://topdocumentaryfilms.com/" >Documentaries</a></li>
<li><a href="http://freeonlinemoviestream.co/" >Movie Stream</a></li>
<li><a href="./megashare.html" >MegaShare</a></li>
<li><a href="http://www.cartoon-world.tv/movie-list/" >Toon</a></li>
<li class='last'><a href="http://watch32.com/new-movies.html" >Watch32</a></li>
</ul>
</li>
</ul>
</div>

#cssmenu {position:fixed;top:0px}

Here is a working example (only had to add a few lines of js): http://jsfiddle.net/wHF97/
jQuery(function($) {
$(document).ready( function() {
$('#cssmenu').stickUp();
});
});
It uses a jQuery plugin called stickUp. Their main page also has a working example: http://lirancohen.github.io/stickUp/#
Note: I included the stickUp plugin using the "External Resources" in the left-pane of the jsfiddle.

Used the css position:fixed attribute:
http://www.w3.org/Style/Examples/007/menus.en.html

jQuery scroll() event and $(window).scrollTop() returns the current position of the window scrolled. If that value goes above the position of the item you want to 'follow' the scroll, use addClass to give that item: position:fixed; top:0; That way, when the user scrolls down past the position of the item, it will suddenly (and nicely) move with the window scroll. You may have to recalc the left of the item. If the position of the window is above, removeClass the fixed position.

My CSS fails my javascript dropdown-menu slide effect

So if you want to see my menu go here.
Since I know you'll want my source, here's the CSS:
* {
margin: 0px;
}
#menu-container ul,
#menu-container li,
#menu-container span,
#menu-container a {
margin: 0;
padding: 0;
position: relative;
}
#menu-container {
text-align:center;
height: 49px;
border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#menu-container:after,
#menu-container ul:after {
content: '';
display: block;
clear: both;
}
#menu-container a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
margin-right: -4px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menu-container ul {
list-style: none;
}
#menu-container > ul > li {
display: inline-block;
margin-right: -4px;
}
#menu-container > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#menu-container > ul > li:first-child > a {
border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
-webkit-border-radius: 0px 0 0 0;
}
#menu-container > ul > li:last-child > a {
border-radius: 0 0px 0 0;
-moz-border-radius: 0 0px 0 0;
-webkit-border-radius: 0 0px 0 0;
}
#menu-container > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#menu-container > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#menu-container .has-sub {
z-index: 1;
}
#menu-container .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menu-container .has-sub ul li {
*margin-bottom: -1px;
}
#menu-container .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#menu-container .has-sub ul li:hover a {
background: #0c7fb0;
}
#menu-container .has-sub .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu-container .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#menu-container .has-sub .has-sub ul li a:hover {
background: #095c80;
}
#menu-container {
-moz-box-shadow: 0 0 10px #888;
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
li {
font-size: 0
}
And JavaScript:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
And the HTML:
<div id='menu-container'>
<ul id='menu' class="menu">
<li class='active'><a href='/'><span>Home</span></a></li>
<li class='has-sub'><a href='/games/'><span>Games</span></a>
<ul>
<li><a href='/games/dota-2/'><span>Dota 2</span></a></li>
<li><a href='/games/cs-go/'><span>CS: GO</span></a></li>
<li><a href='/games/css/'><span>CS: Source</span></a></li>
<li><a href='/games/terraria/'><span>Terraria</span></a></li>
<li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/about.html'><span>About Us</span></a>
<ul>
<li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li>
<li><a href='/faq-list.html'><span>Our FAQs/Q&A List</span></a></li>
<li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li>
<li><a href='/wiki/'><span>Our Wiki</span></a></li>
<li><a href='#'><span>Our Blog</span></a></li>
<li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a>
<ul>
<li class='last'><a href='/forums/'><span>Forums</span></a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
After I added "text-align:center;" to my CSS, when I hover to the menu the slide animation goes in the down direction, but it goes to right too. How to make it go down only?
So I want when you hover on a menu the slide to be only to the bottom NOT to the right.

You have a negative margin being inherited by links in the menu [#menu-container a]. So your menu items end up 4 pixels wider than the menu. You can reset the margin to 0 by adding to the more specific selector like this:
#menu-container .has-sub ul li a { margin-right: 0 }

Categories