keep website menu on screen when scrolling - javascript

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.

Related

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

float's not returing to position after mobile view end

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>

Css/javascript position

Well, this is my problem:
I need the red box behind the number , not above.
My css:
[data-counter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
height: 8px !important;
margin-top: 4px;
content: attr(data-counter);
top: -10px;
position: absolute;
padding: 1px 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
background-clip: padding-box;
font:bold 10px "Helvetica Neue", sans-serif;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.6);
margin-left: -10px;
}​
My javascript(lol)
$(function () {
$('head').append('<style>#numberMps {display:none !important; }#sizeMps { color: red; width: 5px; margin-left: -7px; } </style>');
$('#inbox_link').prepend('<div id="numberMps"></div>');
var newMPs = ".main-content .statused .tcl.tdtopics:has(img[src='http://illiweb.com/fa/empty.gif?NEW']) a[href*='/privmsg?folder=inbox&mode=read&p']";
$('#numberMps').load('privmsg?folder=inbox ' + newMPs, function () {
$('#numberMps').after('<div id="sizeMps"></div>');
var sizeMPs = $('#numberMps a').size();
if (sizeMPs == '0') return;
$('li a[href^="/privmsg?folder=inbox?BOX"]').attr('data-counter', ''+sizeMPs+'');
});
});
Look, the javascript obatin the number of messages, and the css draw this.
Anyone have tips or a solution?

Try useing z-index, it should help.

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