2 level responsive menu doesn't display block

2 level responsive menu doesn't display block - javascript

I'm trying to make my old menu responsive for smaller screen sizes. I get the menu icon working properly, but when I open the list it displays inline instead of block. I tried several options but could not get it work right.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu.responsive li {
float: none;
display: inline;
}
ul.menu.responsive li a {
display: block;
text-align: left;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

You have to put display: block; on the li.
Also, don't forget to remove the set float: none; on the a elements.
I added a z-index on the icon to be able to close it even if you were over the first element.
This may help you :
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
}
ul.menu.responsive li {
float: none;
display: block;
}
ul.menu.responsive li a {
display: block;
text-align: left;
float: none;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

Related

Sub menu closing too fast

The sub menu of a Wordpress site I'm working on closees so fast. But on some users browsers all is fine. The problem is obvious on my part when I go to services -> pets, I can't click anything
http://www.jokerleb.com
The css of the menu
.header_menu_res ul,
.header_menu_res ul ul,
.header_menu_res ul ul ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.header_menu_res ul li.first {
padding-left: 0;
background: none;
}
.header_top .header_top_res p a{
color: #FDC300 !important;
}
/*menu font color*/
.header_menu_res ul li a {
color: #FDC300;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
.header_menu_res ul {
z-index: 99;
margin: 3px;
padding: 0;
list-style: none;
line-height: 1;
}
.header_menu_res ul a {
padding: 5px 10px;
position: relative;
color: #555;
z-index: 100;
display: block;
line-height: 18px;
text-decoration: none;
}
.header_menu_res ul li:hover a {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li.current_page_item,
.header_menu_res ul li.current-menu-item,
.header_menu_res ul li.current-menu-parent a {
color: #555;
background: #f4f4f4;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li li.current_page_item,
.header_menu_res ul li li.current-menu-item {
background: none;
}
.header_menu_res ul li.current_page_item a,
.header_menu_res ul li.current-menu-item a {
color: #555;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.children li a {
background: #fff;
border-top: none;
border-left: none;
}
.header_menu_res ul li {
float: left;
/
font: normal 14px/1.2em Arial, Helvetica, sans-serif;
z-index: 999;
margin: 0 0 20px;
width: 25%;
}
.menu-item i._mi, .menu-item img._mi {
display: block;
float: left;
}
.menu-item span {
margin-top: 8px;
display: block;
margin-left: 60px;
}
.header_menu_res ul li ul {
margin-top: -2px;
background: #fff;
position: absolute;
left: -999em;
width: 180px;
border: 1px solid #dbdbdb;
border-width: 1px 1px 0;
z-index: 998;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu ul ul.children {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu li ul li {
margin: 0;
padding: 0px;
}
.header_menu_res ul.menu li ul li a {
background: none;
padding: 7px 12px;
width: 156px;
color: #555;
font-size: 14px;
line-height: 18px;
}
.header_menu_res ul.menu li ul li a:hover {
text-decoration: underline;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.menu li ul ul {
margin: -32px 0 0 181px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul.sub-menu {
display: none;
position: absolute;
margin: -2px 0 0;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul.menu ul.sub-menu li ul.sub-menu {
display: none;
top: 2px;
left: 180px;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.header_menu_res ul.menu ul.sub-menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul li:hover,
.header_menu_res ul li.hover {
position: static;
color: #555555;
}
.header_menu_res ul li:hover ul ul,
.header_menu_res ul li:hover ul ul ul,
.header_menu_res ul li:hover ul ul ul ul {
left: -999em;
}
.header_menu_res ul li:hover ul,
.header_menu_res ul li li:hover ul,
.header_menu_res ul li li li:hover ul,
.header_menu_res ul li li li li:hover ul {
left: auto;
}
.header_menu_res ul li img.dropdown {
padding: 2px 0 2px 8px;
border: none;
}
.header_menu_res ul.sub-menu {
width: auto;
}
.header_menu_res ul.sub-menu li {
clear: left;
margin: 8px 4px 0;
}
/* category menu */
div#adv_categories,
.header_menu_res ul.sub-menu {
margin: -2px 0 0 0;
padding: 0 0 8px;
position: absolute;
background: #fff;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
div#adv_categories {
display: none;
padding: 0 5px 8px;
}
#menu-header li:hover #adv_categories,
.header_menu .menu li:hover #adv_categories {
display: block;
}
Since Wordpress generates way too much css and I'm sure where's the problem since some people say all is fine; I tried the jquery snippet from here but still doesn't work, I tried with different id's and classes. Perhaps I'm targeting the wrong class. The original snippet from the other question
$('.main_navigation a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide();
}, 1000);
});

Please define speed for hide() and show()
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
Try below code jquery:
$('.main_navigation a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide(500);
}, 1000);
});
https://www.w3schools.com/jquery/jquery_hide_show.asp

Submenu is disappearing on hover

My submenu is disappearing on hover.Please show me how to fix it.
#header {
padding-left: 0;
padding-right: 0;
position: relative;
}
.wp-toolbar #header{
margin-top: 0;
}
#site-title, #site-description {
padding-left: 20px;
}
#theme-logo img {
box-shadow: none;
}
/* =Navigation
*/
#top-navigation {
position: absolute;
bottom: -10px;
right: 0;
}
#theme-top-menu {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#theme-top-menu .sub-menu {
left: auto;
right: 0px;
}
.menu .current_page_item a, .menu .current-menu-item a {
background-color: transparent;
}
#theme-top-menu a {
padding: 0 0.9em;
border: none;
font-weight: normal;
font-size: 80%;
}
#site-navigation{
padding: 0;
position: relative;
max-width: 1140px;
border-top: 1px solid #666666;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.fullwidth #site-navigation {
max-width: 100%;
}
#site-navigation .theme-wrap {
padding: 0 5px;
position: relative;
min-height: 50px;
}
#theme-menu-main {
margin: 0 auto;
background-color: transparent;
}
#theme-menu-main > li {
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
margin: 0;
padding: 10px 0;
}
#theme-menu-main > li a {
border: none;
font-weight: bold;
}
#theme-menu-main > li:hover {
background-color: transparent;
}
#theme-menu-main > li > ul {
top: 50%;
left: 0.9em;
padding: 10px 0;
}
#theme-menu-main > li ul > li a {
margin: 0 10px;
padding: 5px 10px;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 100;
}
#theme-menu-main > li ul > li:last-child a{
border: none;
}
#theme-menu-main > li > a span{
padding: 0 0 2px;
border-bottom: 3px solid transparent;
}
#theme-menu-main a {
background-color: transparent;
font-weight: 100;
}
.menu a:hover { background: none; }

Try this:
ul li:hover ul {
display:block;
}

How do i get the submenus to show with a small window size?

I have a basic menu bar that works on click. Everything works properly, but i noticed that if i make the browser window too small, the submenus open out of view and i can't scroll in the window to see them.
It is really easy to see what i am talking about if you view it on a mobile phone.
How would i auto add scroll bars to make sure that all my page's content can be seen?
Fiddle: http://jsfiddle.net/2SC5G/6/
SEARCH > RESULTS > LATEST SMOKE RESULTS is the longest selection in this demo. in order to see what i an talking about, resize the browser and put the right border right next to the "Search" menu item.
Thanks in advance.
HTML:
<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/tp_menu.js"></script></script>
<link type="text/css" href="includes/tp_menu.css" rel="stylesheet" />
</head>
<body>
<div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
<div id="menuJQ">
<ul class="menuJQ">
<li class="parent"><span>Home</span></li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
</ul>
</div>
</li>
<li class="parent"><span>Request Tool</span></li>
<li><span>Search</span>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
<li><span>Internal DevTasks</span></li>
<li><span>Results</span>
<div id="submenu">
<ul>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><span>Issues for Stability Team</span></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
/* menu::base */
.expand{
display:block;
}
.collapse{
display:none;
}
div#menuJQ {
height: 46px;
padding-left: 0px;
width:auto;
/*background: url(../includes/images/right2.png) repeat right 0;*/
background-color:black;
}
div#menuJQ ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menuJQ ul.menuJQ {
padding-right: 0px;
}
div#menuJQ li {
position: relative;
margin: 0;
padding: 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menuJQ ul ul li {
z-index: 9;
}
div#menuJQ li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 39px;
left: -18px;
-left: 4px;
visibility: hidden;
transition-delay: 0.5s;
-moz-transition-delay: 0.5s; /* Firefox 4 */
-webkit-transition-delay: 0.5s; /* Safari and Chrome */
-o-transition-delay: 0.5s; /* Opera */
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background: url(../includes/images/submenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/submenu-top.gif) no-repeat 0px 0;
}
div#menuJQ ul ul { /*submenu*/
display:none;
z-index: 12;
width: 180px;
padding: 0px 0px 12px 0px;
-padding: 0px 0px 3px 0px;
/*background: url(../includes/images/submenu-bottom.png) no-repeat 0px bottom;*/
background-color:black;
-background: #E4E4E2 none;
margin: 14px 0 0 0;
-margin: 5px 0 0 0;
}
div#menuJQ li > div {
visibility: visible;
}
div#menuJQ a {
position: relative;
z-index: 10;
height: 38px;
display: block;
float: left;
line-height: 38px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
div#menuJQ span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 13px Tahoma;
background: none;
line-height: 38px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/* menu::level1 */
div#menuJQ a {
padding: 0 15px 0 0;
line-height: 38px;
height: 46px;
_margin-right: 1px;
background: none;
font-weight:bold;
}
div#menuJQ span {
font-weight:bold;
}
div#menuJQ a:hover{
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ li.current a,
div#menuJQ ul.menuJQ>li:hover>a {
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ a:hover span{
color: #ff9900;
}
div#menuJQ ul.menuJQ>li:hover>a span {
color: #ff9900;
}
div#menuJQ li {}
div#menuJQ li.last { background: none; }
/* menu::level2 */
div#menuJQ ul ul li {
background-image: url(../includes/images/sep-sub.png);
background-repeat: repeat-x;
background-position: left bottom;
margin: 0;
padding: 0;
}
div#menuJQ ul ul li:hover {
background-image: url(../includes/images/sub-item-hover.gif);
background-color: #717171;
background-repeat: repeat-x;
background-position: left top;
}
div#menuJQ ul ul a {
color: #ff9900;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 13px;
z-index: -1;
padding: 6px 0 6px 0px;
white-space: normal;
width: 166px;
margin: 0 0px 0 13px;
background: none;
}
div#menuJQ ul ul a span {
color: #ff9900;
padding: 0 3px;
line-height: 25px;
font-size: 13px;
font-weight: normal;
margin:0;
}
div#menuJQ li.current ul a,
div#menuJQ li.current ul a span {
background: none;
}
div#menuJQ ul ul a:hover {
background: none;
color: #fff;
}
div#menuJQ ul ul a:hover span {
background: none;
color: #fff;
}
div#menuJQ ul ul a.parent {
background: url(../includes/images/submenu-pointer.png) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
margin-right: -1px;
}
div#menuJQ ul ul a.parent span {
padding-right: 26px;
}
div#menuJQ ul ul a.parent:hover {
background: url(../includes/images/submenu-pointer-hover.gif) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
}
div#menuJQ ul ul a.parent:hover span {
}
div#menuJQ ul ul span {
margin-top: 0;
text-align: left;
}
div#menuJQ ul ul li.last { background: none; }
div#menuJQ ul ul li {
width: 100%;
}
/* menu::level3 */
div#menuJQ ul ul div {
width: 180px;
padding: 0;
background: url(../includes/images/subsubmenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/subsubmenu-top.gif) no-repeat 0px 0;
margin: -32px 0 0 198px !important;
margin: -32px 0 0 176px;
}
div#menuJQ ul ul ul {
padding: 11px 0px 9px 0px;
margin: 20px 0 0 0;
}
div#menuJQ ul ul div li {
position:relative;
top:-10px;
}
/* lava lamp */
div#menuJQ li.back {
background: url(../includes/images/selected-sub.png) no-repeat 0 0;
-background: url(../includes/images/selected-sub.gif) no-repeat 0 0;
width: 5px;
height: 46px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}
div#menuJQ li.back .left {
padding:0;
width:auto;
background: url(../includes/images/selected-sub.png) repeat-x right 0;
-background: url(../includes/images/selected-sub.gif) repeat-x right 0;
height: 46px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
JQuery:
$(document).ready(function(){
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
$('#menuJQ > ul li').mouseleave(function() {
$('ul', this).hide();
});
$('#submenu > ul li a').click(function(e) {
e.preventDefault();
window.location = (this).href;
// var test = (this).href;
// alert(test);
});
});

Put all of the CSS that you wrote into a media query:
#media only screen and (min-width: 900px) {
.expand{
display:block;
}
}
This will make it only work when the screen is wider than 900px. You can change that number of pixels.
Now write the CSS that you want only for mobile, outside the media query. Styles in the mdeia query will overwrite, but only when the condition is met.
If you want a widget for lists, you can visit my page:
http://instancia.net/jquery-plugin-mobile-list/
Shrink your browser width to see the widget. Zip file in page.

Twitter Bootstrap - Nav collapse

I am working on updating my website to be responsive using Twitter Bootstrap. My current website can be viewed # http://www.JoshuaBock.com.
I am encountering an issue on trying to customize the Navbar collapse functionality. At the moment I have it displaying correctly, but it does not function between 981 pixels and 1126 pixels. I am avoiding modifying the Bootstrap base code so I can easily upgrade to a newer version of Bootstrap. The issue is being caused by my custom media query:
Media Query
<pre><code>
#media (min-width: 980px) and (max-width: 1126px) {
.navbar{
width: 85%;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-right: 10px;
padding-left: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #777777;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: #777777;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: #999999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 10px 15px;
margin: 10px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111;
border-bottom-color: #111111;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-right: 10px;
padding-left: 10px;
}
}
#media (min-width: 980px) and (max-width: 1126px) {
.nav-collapse.collapse{
height:0 !important;
overflow:hidden !important;
}
}
</pre></code>
More specify the !important section seems to be causing the issue. If I remove the !important the nav does not collapse.
The actual code can be view on my beta site # http://beta.joshuabock.com/index.html
I know I am close to the solution, but could use some help figuring this out. Any help will be greatly appreciated. Thanks in advance.

When I specify media queries I normally specify them like so
#media all and (min-width: 980px) and (max-width: 1126px)
noticed yours starts #media, so not sure if that causing any issues

Here is how I solved this
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

Removing the page flicker when loading javascript/css

I tried putting the inline javascript code after</body> , but it didn't help.
HTML code:
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="jquery.booklet.1.4.0.css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"> </script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.booklet.1.4.0.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div class="Navigation">
<div id="navbar">
<ul>
<li class="OP"><img src="images/house.png" width="40" height="32" />
</li>
<li class="OP" id="OPM1"><img src="images/order.png" />Orders</li>
<li class="OP" id="OPM"><img src="images/menupic3.png" />Menu</li>
<li class="OP"> <img src="images/contact.png" />Contact
<div class="extended">
<div class="arrow-container"><div class="arrow-up"></div></div>
<ul class="smallNav">
<li>+65-65553333</li>
<li>Facebook</li>
<li>Twitter</li>
<li>enquiry [at] foodstant [dot] com</li>
</ul>
</div>
</li>
<li class="OP"><img src="images/Pen.png" />About Us</li>
<li class="OP"><img src="images/pin.png" />Jobs</li>
</ul>
</div>
</div>
<span id="papersl">
<img src="images/paperslant5.png" />
</span>
<div id="mybook">
<div>
<img src="images/CC1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/WC.png" width="100%" height="100%" />
</div>
<div>
<img src="images/ss1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/beverages.png" width="100%" height="100%" />
</div>
</div>
<form action="" id="search-form" class="SF">
<fieldset>
<input type="text" id="search" name="search" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." class="searchfield" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
<figure id="foot">
<img src="images/footer-comb1.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="503,41,614,85" href="http://www.trees.com/furniture.html">
<area shape="rect" coords="710,44,866,84" href="#0" id="se" >
</map>
</figure>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#numb1').hide().delay(800).fadeIn('normal');
$('#se').click(function() {
$('.SF').css('visibility','visible');
});
$(function() {
$('#mybook').booklet({
width:600,
height:350
});
});
});
</script>
</html>
CSS:
* {
margin: 0;
padding:0;
}
body {
background-image: url('images/BG-W1.png');
font-family: 'Conv_LITHOSPRO-REGULAR',Verdana,Helvetica,'Courier New',sans-serif;
/*height: 800px !important;*/
}
#font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: url('fonts/LITHOSPRO-REGULAR.eot?#iefix') format('embedded-opentype');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
/*height: 762px !important;*/
/*border: 2px solid blue;*/
}
#logo {
float:left;
/*border: 1px solid black;*/
height: 180px;
}
#abtex {
float: left;
/*border: 1px solid black;*/
height: 180px;
}
#navbar {
}
.ftex {
position: relative;
}
#qqq {
position: static !important;
border: 1px solid black;
background-image:url('images/bg-fs-5.png');
background-repeat:no-repeat;
height: 125px;
width: 800px;
/*padding:25px 0 0 0;*/
/*padding-top: 50px;
padding-left: 34px;*/
}
.ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
.ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
.ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
.ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#footerBg {
position: relative;
bottom:-90px;
left:-50px;
}
#foot {
padding-top: 10px;
}
#foot img {
display: block;
}
#foothome{
padding-top:100px;
}
#foothome img {
display: block;
}
#numb1 {
position: absolute;
/*border:10px solid red;*/
top:10px;
right:-124px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}
#abt {
position: relative;
/*border: 1px solid red;*/
height: 400px;
left:180px;
top:-60px;
z-index: -2;
}
#papersl {
position: absolute;
left: 60px;
top: 222px;
z-index: -4;
}
.Navigation { background:background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
font-size: 26px;
/*position: relative;
top:-50px;*/
clear:both;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; }
.Navigation ul li a { font-size: 26px; color: white; text-decoration: none; }
.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;}
.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }
.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }
.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }
.Navigation ul li .extended a { font-size:14px;}
.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; }
.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; }
.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; }
.extended ul li {float:left;}
.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; }
.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }
.Navigation ul li:hover .extended { display: block; }
.Navigation ul li ul li:hover a { color: white; }
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 15px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
#navbar li a:link {
color: #EF174A;
}
#navbar li a:visited {
color: #BF4100;
}
#navbar li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
#navbar li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; }
.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}
.arrow-container { margin-top:-16px; height:16px; }
fieldset {
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#main {
border: medium none;
/*height: 500px;*/
margin: 50px auto;
padding: 15px 0;
width: 326px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.or1 input {
background-color: #303030;
border: medium none;
border-radius: 0.4em 0.4em 0.4em 0.4em;
box-shadow: 0 -1px 0 0 #000000;
color: #FFFFFF;
font-size: 1.2em;
height: 27px;
letter-spacing: 2px;
margin: 15px 0;
padding: 0 0 0 10px;
width: 316px;
}
.ico {
float: right;
}
button {
background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(100%,rgba(58,58,58,1)));
background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
border: medium none;
border-radius: 0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius: .2em;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
color: #FFFFFF;
float: right;
height: 24px;
text-align: right;
width: 79px;
}
button:hover {
background: -moz-linear-gradient(center bottom , #303030, #4B4B4B) repeat scroll 0 0 transparent;
}
button:active {
border: medium none;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.note1 {
padding-top: 40px;
padding-left: 20px;
font-size: 20px;
text-align: center;
color: #F74E09;
}
#search-form { width: 190px; position: absolute; right: 100px;
bottom:55px;
visibility: hidden; display: block;}
#search { background: #b2a48c; border: 3px solid #402f1d; color: #2b1e11; height: 20px; line-height: 20px; width: 150px; padding: 2px 4px; position: absolute; top: 11px; left: 0}
#search-submit { background: #b2a48c url(images/search.png) no-repeat 12px 7px; border: 3px solid #402f1d; height: 50px; width: 50px; position: absolute; top: 0; right: 0; display:block;}
#search-submit img {
display: block;
}
#search-submit:hover { background-color: #c7bba7;}
/* CSS3 */
#search { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
text-shadow: rgba(0,0,0,.2) 0 0 5px;
display: inline;
}
#search-submit { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -mox-box-shadow: 0 0 5px black;display:block;
/* Webkit-transition */
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease-in;
}

Use css to set the visibility setting for body to hidden before the js is loaded then remove the property with js onload using jquery.
css:
body { visibility: hidden;}
javascript:
$().ready(function(){ $("body").css({visibility:'visible'})});

If I understand the question correctly, put this in testCSS.css...
#numb1 { visibility:hidden; }
or...
#numb1 { display:none; }
Whichever is more pleasing to you.
Doing that will hide the numb1 element before the page is displayed. What you're doing lets the page load before hiding it and then fading it in, so it's briefly visible.

We Keep Coding

JavaScript is the programming language of the Web.

2 level responsive menu doesn't display block - javascript

Related

Sub menu closing too fast

Submenu is disappearing on hover

How do i get the submenus to show with a small window size?

Twitter Bootstrap - Nav collapse

Removing the page flicker when loading javascript/css

Categories

Resources