I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.
You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;
Related
I would like to know where I made a mistake or where should I add something?
How to replace hours on third blue div on bottom to the right site? I was trying and shearching, but I can't see solution. Please let me know what to change and maybe also can You recomend me tutorial or articles with that case.
When I hover over a menu button, I'd like the text to turn white, but when i change it like color: #fff i doesn't work.
Sc1
Sc2
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
background-image:url(Images/bg.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
width: 100%;
min-height: 100vh;
position: relative;
}
.menubar{
background: #fff;
text-align: center;
position: static;
}
.menubar ul{
display: inline-flex;
list-style: none;
color: black;
}
.menubar ul li{
width: auto;
margin: 10px;
padding: 15px;
}
.menubar ul li a{
text-decoration: none;
color: black;
}
.active, .menubar ul li:hover{
background-color: #2E8BC0;
border-radius: 2px;
color: white;
}
.menubar .fas, .menubar .far{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menubar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: #040c7a;
margin-top: 15px;
margin-left: -15px;
}
.menubar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menubar ul li:hover .sub-menu-1 ul li{
width: 100px;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menubar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menubar ul li:hover .sub-menu-1 ul li a:hover{
color: #278eff;
}
.fa-angle-right{
float: right;
margin-left: 8px;
}
.class-menu-2{
display: none;
}
.hover-me:hover .class-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 110px;
background: #040c7a;
}
.row1{
color: white;
display:flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: transparent;
position: absolute;
bottom: 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.text-box1{
background-color: #2E8BC0;
height: 150px;
width: 300px;
display: block;
}
.text-box1 h3{
padding: 10px;
font-size:15px;
text-align: left;
margin-left: 20px;
}
.text-box1 p{
font-size: 25px;
padding: 10px;
text-align: left;
margin-left: 20px;
display: flex;
}
.text-box1 p2{
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
cursor: pointer;
margin-left: -40px;
margin-top: 10px;
}
.hero-btn:hover{
border: 1px solid white;
background: white;
transition: 1s;
color: black;
}
.text-box1 p a{
color: white;
}
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display:flex;
border-bottom: 1px dotted white;
}
.text-box1 ul li:last-child{
border-bottom: none;
}
.text-box1#first{
background-color: #0C2D48;
}
.text-box1#second{
background-color: #145DA0;
}
.text-box1#third
background-color: #2E8BC0;
}
<!DOCTYPE html>
<html>
<head>
<title>Przychodnia</title>
<link rel="stylesheet" href="PrzychodniaStyle.css">
</head>
<body>
<section class="header">
<div class="menubar">
<ul>
<li class="active"><i class="fas fa-home"></i>Strona głowna</li>
<li><i class="far fa-address-card"></i>Specjalistyka
<div class="sub-menu-1">
<ul>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li> Menu</li>
</ul>
</div>
</li>
<li><i class="fas fa-motorcycle"></i>Stomatologia
<div class="sub-menu-1">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div></li>
<li><i class="fas fa-toolbox"></i>Poradnie POZ</li>
<li><i class="fas fa-graduation-cap"></i>Medycyna Pracy</li>
<li><i class="fas fa-flag-checkered"></i>Diagnostyki</li>
<li><i class="fas fa-user-plus"></i>Laboratorium</li>
<li><i class="fas fa-user-plus"></i>O nas</li>
<li><i class="fas fa-mobile-alt"></i>Kontakt</li>
</ul>
</div>
<div class="row1">
<div class="text-box1" id="first">
<h3>Rejstracja telefoniczna</h3>
<p>+1234567890</p>
</div>
<div class="text-box1" id="second">
<h3>Rejstracja elektroniczna</h3>
<p class="e">przychodnia#eu.pl</p>
Formularz kontaktowy
</div>
<div class="text-box1" id="third">
<h3>Godziny otwarcia</h3>
<ul>
<li><p1>Poniedziałek</p1><p2>6:00-18:00</p2></li>
<li>Wtorek</li>
<li>Środa</li>
<li>Czwartek</li>
<li>Piątek</li>
</ul>
</div>
</div>
</section>
<section>
<div class="text-box1">
Lolz
</div>
Formularz kontaktowy
</section>
</body>
</html>
Add justify-content: space-between (documentation) :
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display: flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
As recommened by #Chris G, use a more specific selector :
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
background-image:url(Images/bg.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
width: 100%;
min-height: 100vh;
position: relative;
}
.menubar{
background: #fff;
text-align: center;
position: static;
}
.menubar ul{
display: inline-flex;
list-style: none;
color: black;
}
.menubar ul li{
width: auto;
margin: 10px;
padding: 15px;
}
.menubar ul li a {
text-decoration: none;
color: black;
}
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
.menubar .fas, .menubar .far{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menubar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: #040c7a;
margin-top: 15px;
margin-left: -15px;
}
.menubar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menubar ul li:hover .sub-menu-1 ul li{
width: 100px;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menubar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menubar ul li:hover .sub-menu-1 ul li a:hover{
color: #278eff;
}
.fa-angle-right{
float: right;
margin-left: 8px;
}
.class-menu-2{
display: none;
}
.hover-me:hover .class-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 110px;
background: #040c7a;
}
.row1{
color: white;
display:flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: transparent;
position: absolute;
bottom: 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.text-box1{
background-color: #2E8BC0;
height: 150px;
width: 300px;
display: block;
}
.text-box1 h3{
padding: 10px;
font-size:15px;
text-align: left;
margin-left: 20px;
}
.text-box1 p{
font-size: 25px;
padding: 10px;
text-align: left;
margin-left: 20px;
display: flex;
}
.text-box1 p2{
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
cursor: pointer;
margin-left: -40px;
margin-top: 10px;
}
.hero-btn:hover{
border: 1px solid white;
background: white;
transition: 1s;
color: black;
}
.text-box1 p a{
color: white;
}
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display:flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
.text-box1 ul li:last-child{
border-bottom: none;
}
.text-box1#first{
background-color: #0C2D48;
}
.text-box1#second{
background-color: #145DA0;
}
.text-box1#third{
background-color: #2E8BC0;
}
<!DOCTYPE html>
<html>
<head>
<title>Przychodnia</title>
<link rel="stylesheet" href="PrzychodniaStyle.css">
</head>
<body>
<section class="header">
<div class="menubar">
<ul>
<li class="active"><i class="fas fa-home"></i>Strona głowna</li>
<li><i class="far fa-address-card"></i>Specjalistyka
<div class="sub-menu-1">
<ul>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li> Menu</li>
</ul>
</div>
</li>
<li><i class="fas fa-motorcycle"></i>Stomatologia
<div class="sub-menu-1">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div></li>
<li><i class="fas fa-toolbox"></i>Poradnie POZ</li>
<li><i class="fas fa-graduation-cap"></i>Medycyna Pracy</li>
<li><i class="fas fa-flag-checkered"></i>Diagnostyki</li>
<li><i class="fas fa-user-plus"></i>Laboratorium</li>
<li><i class="fas fa-user-plus"></i>O nas</li>
<li><i class="fas fa-mobile-alt"></i>Kontakt</li>
</ul>
</div>
<div class="row1">
<div class="text-box1" id="first">
<h3>Rejstracja telefoniczna</h3>
<p>+1234567890</p>
</div>
<div class="text-box1" id="second">
<h3>Rejstracja elektroniczna</h3>
<p class="e">przychodnia#eu.pl</p>
Formularz kontaktowy
</div>
<div class="text-box1" id="third">
<h3>Godziny otwarcia</h3>
<ul>
<li><p1>Poniedziałek</p1><p2 class="hour">6:00-18:00</p2></li>
<li>Wtorek</li>
<li>Środa</li>
<li>Czwartek</li>
<li>Piątek</li>
</ul>
</div>
</div>
</section>
<section>
<div class="text-box1">
Lolz
</div>
Formularz kontaktowy
</section>
</body>
</html>
I am using the following script as navbar, however I can't figure out how to make the menus/submenus respect the screen sides, and not continue to open outside of the screen border.. I don't want to change the default behavior (direction) of all the menus, just to change it it it would be cut by any of the sides..
I found a similar post (and another one too), but I don't know how to implement the same answer to this current code.
Example of the menu being cut by the side of the monitor:
Here is the code snippet, along with jsfiddle link too.
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
in your sub-sub menus you're aligning based on left margin at 149px, just use the same attribute but instead for the right. right:149px; instead of left:149px;
ul.sub-menu ul.sub-menu {
/* level 3+ */
right: 149px;
}
Also you can align the sub menus to the left of the nav items. To do this use :
ul.sub-menu {
/* level 2 */
right: 0;
left: initial;
}
I included both examples in this snippet:
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
right:0;
left:initial;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
right: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
I guess the real question here is, where do you want it to go? If there's no page real estate to the right of your menu, you can't place the submenu to the right, you have to place it to the left.
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: -149px;
top: 0px;
}
Note, the left value is changed from 149px to -149px. That places the submenu to the left (where you have screen real estate), and not to the right, where you don't.
I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.
Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>
Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
see the ul is out side the Items li, put it inside and it will work like this.
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
You were putting a ul inside a ul directly.
The problem is not with your jQuery but with the HTML, you should wrap your dropdown menu (ul) with items (li)
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>
I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.
I'm trying to create a simple menu pop-up effect using anchors within a div and unordered lists.
I want the html to look something like this:
<div class="info">
Link |
<a onclick="menu('id1');">Another Link</a>
<ul id="id1" class="submenu">
<li>Stuff</li>
<li>Other</li>
<li>Hooray</li>
</ul>
</div>
Here is my javascript [pretty simple, not the problem, i don't think]:
function menu(id) {
var myLayer = document.getElementById(id);
if (myLayer.style.display == "none" || myLayer.style.display == "") {
myLayer.style.display = "block";
} else {
myLayer.style.display = "none";
}
}
The css is I believe where the problem is:
.info ul .submenu
{
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0;
clear: both;
z-index: 2;
display: none;
}
.info ul .submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.info .submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.info .submenu li a:hover
{
background: #0000ff;
}
I don't really know how to create the css on the ul so that if appears over the underlying text. I can't get it in the right spot.
I just want to click the <a> tag and a menu will pop up directly below the <a> tag.
I cleaned up your CSS:
.info ul.submenu
{
border: solid 1px #000;
border-top: none;
background-color: #fff;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0px 0px 0px;
z-index: 2;
display: none;
}
.info ul.submenu li
{
display: block;
border: none;
border-top: solid 1px #00ff00;
}
.info ul.submenu li a
{
display: block;
padding: 6px 0px 6px 4px;
color: #ff0000;
}
.info ul.submenu li a:hover
{
background: #0000ff;
}
Let me know if the problem is still there. Like I said earlier, I don't see "a"'s moving on show/hide.
EDIT: Ok. I'm much more stronger with jQuery as oppose to plain javascript. If you cannot use jQuery for whatever reason, I have to leave it up to you to perform the same with plain js. Sorry!
HTML:
<ul class="root">
<li>
<div class="menuHeader">Something 1</div>
<ul class="parent">
<li>asdf 1.1</li>
<li>asdf 1.2</li>
<li>asdf 1.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 2</div>
<ul class="parent">
<li>asdf 2.1</li>
<li>asdf 2.2</li>
<li>asdf 2.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 3</div>
<ul class="parent">
<li>asdf 3.1</li>
<li>asdf 3.2</li>
<li>asdf 3.3</li>
</ul>
</li>
</ul>
CSS:
.info ul.root > li
{
width: auto;
float: left;
border:solid 1px blue;
padding:5px;
}
.info ul.parent
{
padding:0px;
display:none;
}
.info .menuHeader
{
cursor:pointer;
}
.info li
{
list-style: none;
}
Javascript (utilizing jQuery):
$(document).ready(function() {
$('.menuHeader').click(function(event) {
$('.parent').hide();
$(this).siblings('.parent').show();
});
});
I included only the functional kind of stuff in the CSS. Obviously, you need different look, so you may play with colors on your own. Let me know if you have more questions.
Try:
ul .submenu ==> ul.submenu
in the css.
I have made a couple of changes to ur css -
i am directly refering to submenu class
.submenu
{
list-style: none;
display: none;
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
margin:0;
padding: 0 5px;
width: 150px;
clear: both;
z-index: 2;
}
.submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.submenu li a:hover
{
background: #0000ff;
}