This is my html file
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li class="pjlist" onclick="load">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li class="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
and this is my css class
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top:30px;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.arrow2 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
I can do the same thing in css but requires many exceptions to be added so as to work in each and every browser but javascript is something that I haven't used before and I was suggested that it can be fairly easy to do with it.
So please can someone tell me how to open/close the sub-menu using only javascript.
Thanks in advance!!!
Try this it will work on 'hover' event not on 'click' but full css.
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility:hidden;
}
ul li:hover div
{
visibility: visible;
}
ul li:hover ul
{
visibility: visible;
}
Try this:
<style>
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility: hidden;
}
</style>
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li id="pjlist">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li id="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
</body>
</html>
<script>
var myMenu = document.getElementById("pjlist");
var open = false;
myMenu.addEventListener("click", function()
{
if(open)
{
//then close
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'hidden';
}
else
{
//open
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'visible';
}
});
</script>
You can use
var myMenus = document.getElementsByClassName()
to add the event listner on all your menu children.
Good Luck
Related
Guys, please help me to repeat this functionality in pure javascript.
I like how this menu works, but I can't figure it out with jquery.
Or if someone has a specification on how to implement jquery functionality in pure javascript, I would be very grateful.
Hello!
Guys, please help me to repeat this functionality in pure javascript.
I like how this menu works, but I can't figure it out with jquery.
Or if someone has a specification on how to implement jquery functionality in pure javascript, I would be very grateful.
$(document).ready(function(){
//the trigger on hover when cursor directed to this class
$(".core-menu li").hover(
function(){
//i used the parent ul to show submenu
$(this).children('ul').slideDown('fast');
},
//when the cursor away
function () {
$('ul', this).slideUp('fast');
});
//this feature only show on 600px device width
$(".hamburger-menu").click(function(){
$(".burger-1, .burger-2, .burger-3").toggleClass("open");
$(".core-menu").slideToggle("fast");
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
* {
margin: 0;
padding: 0;
outline: none;
border: none;
text-decoration:none;
color:#f2f2f2;
}
.main-menu {
display:block;
position:relative;
background:#0e0e0e;
}
.container-menu {
width:80%;
margin:0 auto;
}
.main-menu:before,.main-menu:after{
display: table;
line-height: 0;
content: "";
}
.core-menu {
text-align:center;
font:normal normal normal 1em/1 Roboto, sans-serif;
overflow:hidden;
}
.core-menu li {
list-style:none;
display:inline-block;
cursor:pointer;
}
.core-menu li a {
display:inline-block;
padding:1em;
}
.core-menu li a:hover {
background:#38a201;
}
li span.toggle {
padding-left:1em;
}
.toggle:before {
content:"\f107";
font:normal normal normal 16px/1 FontAwesome;
}
.dropdown {
position:absolute;
width:230px;
background:#1a1a1a;
text-align:left;
display:none;
}
.dropdown li {
display:block;
}
.dropdown li a {
display:block;
}
.dropdown2 {
position:absolute;
width:230px;
background:#2d2d2d;
text-align:left;
display:none;
right:-100%;
top:0;
}
.dropdown2 li {
display:block;
}
.dropdown2 li a {
display:block;
}
li span.toggle2 {
position:absolute;
right:0;
margin-right:20px;
}
.toggle2:before {
content:"\f105";
font:normal normal normal 16px/1 FontAwesome;
}
.hamburger-menu {
padding:1em;
display:none;
font:normal normal normal 16px/1 Roboto;
text-transform:uppercase;
}
#media (max-width:720px) {
.main-menu {
height:50px;
}
.container-menu {
width:100%;
}
.navigation {
float:left;
display:block;
width:100%;
}
.core-menu {
float:right;
width:100%;
background:#1a1a1a;
margin:auto;
display:none;
}
.core-menu li {
width:100%;
display:block;
}
.core-menu li a{
display:block;
margin:auto;
}
.hamburger-menu {
display:block;
text-align:center;
padding-right:60px;
float:none;
width:100%;
}
.burger-1, .burger-2, .burger-3 {
display:block;
position:absolute;
width:20px;
height:3px;
border-radius:30px;
right:0;
margin-right:25px;
background:#fff;
-webkit-transition:.2s ease;
-ms-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}
.burger-1 {
top:15px;
}
.burger-2 {
top:23px;
}
.burger-3 {
top:31px;
}
.burger-1.open, .burger-2.open, .burger-3.open {
-webkit-transition:.2s ease;
-ms-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
transform-origin:50% 50%;
}
.burger-1.open {
top:25px;
width:23px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.burger-2.open {
opacity:0;
}
.burger-3.open {
top:25px;
width:23px;
transform:rotate(-45deg);
}
.dropdown {
width:100%;
background:#0e0e0e;
text-align:center;
position:relative;
}
.dropdown2 {
right:0;
top:0;
width:100%;
position:relative;
padding:0 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id='main-menu' class='main-menu'>
<div class='container-menu'>
<nav class='navigation'>
<span class='hamburger-menu'>Navigate
<span class='burger-1'></span>
<span class='burger-2'></span>
<span class='burger-3'></span>
</span>
<ul class='core-menu'>
<li><a href='#'>Product<span class='toggle'></span></a>
<ul class='dropdown'>
<li><a href='#'>Windows 10<span class='toggle2'></span></a></a>
<ul class='dropdown2'>
<li><a href='#'>Windows 10 Pro</a></li>
<li><a href='#'>Windows 10 Home</a></li>
<li><a href='#'>Profesional</a></li>
</ul>
</li>
<li><a href='#'>Windows Phone</a></li>
<li><a href='#'>Laptop</a></li>
</ul>
</li>
<li><a href='#'>Featured<span class='toggle'></a>
<ul class='dropdown'>
<li><a href='#'>Cortana</a></li>
<li><a href='#'>Xboct</a></li>
<li><a href='#'>Microsoft Edge</a></li>
</ul>
</li>
<li><a href='#'>Devices</a></li>
<li><a href='#'>Help</a></li>
</ul>
</nav>
</div>
</div>
I'm sure this is a common problem with pure css navbar. I have a navbar created with ul and li's but I can't get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I'm hovering over the link but I'm not sure how to get it work. I tried jQuery mouseover but it wasn't working for me:
#font-face{
font-family: Bebas;
src:url(BEBAS.TTF);
}
body{
margin:0 auto;
height:500px;
font-family: Bebas;
}
.header{
top:0;
position:absolute;
left:0;
right:0;
background:#ff6200;
height:50px;
width:100%;
color:white;
font-family: Bebas;
}
.header .call{
line-height:50px;
}
.call{
width:60%;
margin:0 auto;
}
.login{
float:right;
}
.callme, .loginme{
color:#AF2626;
}
.signup{
margin-left:10px;
}
.number{
margin-left:10px;
}
.navbar{
margin-top:50px;
right:0;
left:0;
position:relative;
height:130px;
width:100%;
background:#F7F7F7;
border-radius:0px;
padding:0px;
}
.inside-navbar{
line-height:130px;
width:60%;
margin:0 auto;
font-size:40px;
}
.logo{
color:#FF6200;
}
#navsman{
font-size:16px;
float:right;
display:inline-block;
min-width:300px;
position:absolute;
padding-right: 20%;
}
#navsman li{
display:inline;
position:relative;
padding-left:15px;
line-height:1.4;
}
#navsman li ul{
position:absolute;
display:none;
}
#navsman li:hover > ul.firstmenu{
display:block !important;
margin-top: -50px;
}
#navsman li ul li{
position:relative;
padding-left:15px;
}
#navsman ul.secondmenu{
margin-left: 40px;
padding-top:15px;
padding-top: 30px;
z-index: 2;
width: 120px;
display:none;
}
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
#navsman ul.firstmenu li:hover ul.secondmenu{
display:block !important;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<div class="headwrapper">
<div class="header">
<div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span>
<span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span>
</div>
</div>
<div class="navbar">
<div class="inside-navbar">
<span>YOUR<span class="logo">LOGO</span></span>
<ul id="navsman">
<li>Title1</li>
<li class="title2">Title2
<ul class="firstmenu">
<li>SUBMENU1</li>
<li>SUBMENU2</li>
<li>SUBMENU3
<ul class="secondmenu">
<li class="secondli-first">Sub link 1</li>
<li class="secondli-second">Sub link 1</li>
</ul>
</li>
</ul>
<li>Title3</li>
<li>Title4</li>
<li>Title5</li>
<li>Title6</li>
<li>Title7</li>
</div>
</ul>
</div>
</div><!--Navbar end-->
</div>
Replace:
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
With:
#navsman > li:hover > ul li {
left: auto;
padding-top: 5px ;
min-width: 100%;
height: 10px;
margin-top:-15px;
padding-left: 10px;
}
Close the gap mentioned by #James Montagne
navsman li ul{
position:absolute;
display:none;
top:70px; <-- new line of code
}
I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.
Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. link
http://jsfiddle.net/bLbdavqu/2/
HTML:
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
CSS:
body {
background:brown;
}
#pull {
display:none;
float:left;
height:auto;
width:100%;
}
#pull img {
float:right;
}
#nav{
float:left;
height:155px;
width:63%;
background:url(../images/top-banner.png) no-repeat;
background-position:bottom;
background-size:100%;
position:relative;
}
#nav ul {
height:auto;
width:100%;
list-style-type:none;
position:absolute;
bottom:0;
*zoom:1;
}
#nav ul li {
float:left;
padding-left:20px;
position:relative;
}
#nav ul li a {
font-family:Trajan-Pro;
font-size:0.9em;
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
#nav ul li:hover > a {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
/*1st level sub-menu */
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
height:auto;
width:180px;
display:block;
}
#nav ul ul li:hover > a {
color:#d2aa76;
border-bottom:none;
}
#nav ul ul {
padding:0;
position:absolute;
top:100%;
padding-top:15px;
}
#nav ul ul li {
float:none;
position:relative;
padding:7px 0px;
border-top:1px solid #000;
background: #423d33;
background: linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
}
#nav ul ul li a {
font-size:0.8em;
padding-left:15px;
}
#nav ul ul li a:hover {
border-bottom:none;
}
#media screen and (max-width: 1900px) {
#logo {
height:95px;
width:100%;
background:none;
}
#logo h1 {
top:0;
margin:0;
padding-top:10px;
}
#header-container {
height:auto;
}
#pull {
display:block;
}
#nav {
height:100%;
width:100%;
background:none;
margin:0;
padding:0;
clear:both;
}
#nav ul {
height:100%;
position:static;
margin:0;
padding:0;
display:block;
}
#nav ul > li {
float: none;
}
#nav ul li {
padding-left:0px;
}
#nav ul li a {
display:block;
padding: 9px 9px;
position: relative;
z-index:100;
}
#nav ul ul {
position:relative;
top:0;
bottom:0;
margin:0;
padding:0;
}
#nav ul li:hover > ul {
height:auto;
width:100%;
}
#nav ul ul li {
border-top:none;
background: #615f5b;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#nav ul ul li a {
display: block;
padding-left:30px;
position: relative;
z-index: 100;
}
#nav ul > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
You can use javascript to change the attribute:
I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/
function show(){
var show = document.getElementById('the_menu');
show.setAttribute('style','display:inline');
}
You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu?
Or, if you are ready to use jquery, just use toggle:
$(document).ready(function(){
$('button').click(function () {
$("#toggle").toggle();
});});
http://jsfiddle.net/bLbdavqu/5/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div><br/><br/>
<div id="the_menu">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
</div>
Script
<script>
function show(ValueToggle){
if(ValueToggle==1){
$('#the_menu').show();
$('#pulls').attr('onClick','show(0)');
} else {
$('#the_menu').hide();
$('#pulls').attr('onClick','show(1)');
}
}
</script>
You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/
Just Change the CSS of the ul.
Hide List- $( "#mylist" ).css("display","none");
Show List- $( "#mylist" ).css("display","block");
I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and
again hide these items on click of link "menu" . I made a jsfiddle for you http://jsfiddle.net/Tushar490/kL1dgvmr/6/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<div id="bs-example-navbar-collapse-2">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div>
</div><!--/nav-->
Script :-
$(document).ready(function () {
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});
});
In CSS you just need to remove "float:left;" from "#pull" .
Hope this would help to you !!
here is the solution please see the code at
$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});
http://jsfiddle.net/bLbdavqu/12/
the updation of your requirements.
I have a drop down menu that has sub menus, the entire menu spans the whole width of the browser, right now the links are all positioned to the left of the screen. What I would like is my links to be all in the center of the screen, with the orange background still spanning the entire width of the browser.
Here is the code:
inside the head goes the javascript and the css, and the rest in the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).children(":hidden").slideDown();
},function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
<style>
#menu{
height: 30px;
background-color:#F90;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>example</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>
Add margin: auto and display: table:
css
#menu{
height: 30px;
background-color:#F90;
width:100%;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:auto;/*Add this*/
display: table;/*Add this*/
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
fiddle
How to define that by default there should be shown the content of "submenu11" under ther "menu1"?
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="css3menu1" class="menu">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul>
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
<div id='submenu11'>
<p> Content </p>
</div>
<div id='submenu12'>
<p> Content </p>
</div>
<div id='submenu13'>
<p> Content </p>
</div>
<div id='submenu14'>
<p> Content </p>
</div>
<script>
$('ul.menu').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function() {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
</script>
</body>
CSS stylesheet:
html,body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ffffff;
width: 100%;
margin: 0px auto;
}
p {
margin: 0 0 2em;
}
h1 {
margin: 0;
font:bold 12px Arial;
}
h2 {
margin:0;
color: #55aaff;
font:bold 12px Arial;
}
h3 {
margin:0;
font:normal 10px Arial;
}
h4 {
margin:0;
font:normal 12px Arial;
}
a {
color: #339;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div#header {
padding:1em;
background:#00557f 100% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font:normal 10px Arial;
text-align:right;
color:#b7ddf2;
margin:0;
}
div.scrollbar {
height: 300px;
overflow: auto;
border: solid 1px #000;
padding: 5px;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
padding:1em;
background:#ddd 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#footer p {
font-style:italic;
font-size:1.1em;
margin:0;
}
/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
background-color:#FFFFFF;border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;
padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
display:block;
}
ul#css3menu1 li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
*display:inline;
}
ul#css3menu1>li{
margin:0;
}
* html ul#css3menu1 li a{
display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}
ul#css3menu1 a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 12px Arial;
color:#000000;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:10px;
background-color:#ebf4fb;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#C0C0C0;
}
ul#css3menu1 ul li{
float:none;
margin:10px 0 0;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
background-color:#FFFFFF;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:11px Arial;
color:#000;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#b7ddf2;
border-color:#C0C0C0;
border-style:solid;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
background-position:0 100px;
}
ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:10px;
}
ul#css3menu1 img.over{
display:none;
}
ul#css3menu1 li:hover > a img.def{
display:none;
}
ul#css3menu1 li:hover > a img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.def{
display:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#b7ddf2;
background-position:0 100px;
border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#FFFFFF;
background-image:none;
color:#868686;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */
EDIT1: I included the script and stylesheet.
EDIT2: Please look at the picture. It should clarify the issue.
The problem is in this line:
$active = $links.first().addClass('active');
It takes the first link in your menu and makes it active. Your first <a> tag in the ul with class menu is not the first menu item, but:
<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
So you need to make sure you target the first menu item. You can for example assign an id to it:
<li>SUBMENU11</li>
and then you have to rewrite that line of javascript to:
$active = $('#submenu-default').addClass('active');
That should do the trick. Obviously you can use any other way to locate that link.
EDIT: Maybe even better solution would be to rewrite your html as follows:
<ul id="css3menu1">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul class="menu">
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
This way you don't have to change the javascript, as the first link in the menu now indeed is the first item of the menu. I leave it for you to find out what works best for you.
I guess you want something like this: http://www.cssmenus.co.uk/dropdown.html
If you show an example or drawing we could help you even better.