I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down and back to + when the menu is up(hidden). How can I do this?
my html looks like
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals</li>
<li>Dresses</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Wholesale</li>
<li>Retailers</li>
<li>Contact</li>
</ul>
</nav>
I am currently using js to drop down my menu. Can I add to my current js to achieve this. My js looks like
$(document).ready(function() {
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
});
});
here is my css
nav{
position:relative;
display:block;
width:70%;
margin:0;
padding:3px 15%;
border-top:1px solid #d0d0d0;
text-align:center;
font:15px 'OpenSans';
z-index: 999;
}
nav ul{
position:relative;
width:100%;
margin:0;
padding:0;
}
nav li{
display:inline-block;
margin:0 10px;
padding:0;
}
nav li ul li{
position:relative;
display:block;
width:150px;
margin:0;
padding:0;
}
.shopList{
position:absolute;
display:none;
width:100px;
margin:0 0 0 -50px;
padding:0;
}
nav a{
position:relative;
display:block;
width:auto;
margin:0;
padding:0;
color:#707070;
text-decoration:none;
}
One solution is to compare previous text with new:
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
nav {
position: relative;
display: block;
width: 70%;
margin: 0;
padding: 3px 15%;
border-top: 1px solid #d0d0d0;
text-align: center;
font: 15px'OpenSans';
z-index: 999;
}
nav ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
nav li ul {
display: none;
}
nav li ul li {
position: relative;
display: block;
width: 150px;
margin: 0;
padding: 0;
}
.shopList {
position: absolute;
display: none;
width: 100px;
margin: 0 0 0 -50px;
padding: 0;
}
nav a {
position: relative;
display: block;
width: auto;
margin: 0;
padding: 0;
color: #707070;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals
</li>
<li>Dresses
</li>
<li>Jumpsuits
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</nav>
Related
I have created custome side bar for my site, All is fine but I have menu's and submenu's when user hovers on the menu list if it has the submenu then it will show
thats fine. The problem is submenu not overlapping the scrollbar and side parent/sibling element. I have added images here for more clarification.
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
.menu ul {
list-style-type: none;
margin-left:-40px;
margin: 0;
padding: 0;
}
.menu ul > div{
font-weight:bold;
font-size:18px;
margin-top: 10px;
margin-bottom:0px;
border-bottom:1px solid #f1f1f1;
cursor: pointer;
}
.menu ul li {
padding: 5px;
position: relative;
vertical-align: middle;
height:auto;
width: 100%;
border-bottom:1px solid #f1f1f1;
font-size: 16px;
padding-left:10px;
}
.menu ul ul{
min-height: 30px;
transition: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 80%;
top:100%;
border: 1px solid #f1f1f1;
z-index: -1000000;
}
.menu ul ul > li{
width: 250px;
height: auto;
background-color: white;
border-bottom: 1px solid black;
}
.menu > ul > li > div > i{
float: right;
vertical-align: middle;
line-height: 1.5;
}
.menu ul li:hover{
background-color:#cccccc;
cursor:pointer;
opacity: 1;
}
.menu ul li:hover > ul{
opacity: 2;
visibility: visible;
z-index: 100000000;
//left: 100%;
}
<!-----Header will come here ----->
<div class="container-fluid row">
<div class="col-md-12 text-center" id="topHeader">
<span>Circulation</span>
</div>
<div class="col-md-2">
<div class="menu"><i id="hideSideBar" class="fa fa-close"></i>
<ul class="menuList"><div class="listName">Reports</div>
<li class="path" data-screen="CustomizedCirculationReportsCt/index" id="li_CustomizedReport">Customized Report</li>
<li class="path" data-screen="CustomizedCirculationStatisticsCt/index" id="li_CustomizedReport">Customized Statistics</li>
<li class="hasChildUl" id=""><div class="listName">UserWise Report<i class="fa fa-caret-right"></i></div>
<ul class="menuList">
<li class="path" data-screen="UserWiseCirculationController/AllUserCirculation" id="userWiseCrReport">Circulation Report</li>
<li class="path" data-screen="UserWiseCirculationController/userWiseFineCollection" id="userWiseFineCrReport">Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-10 firstChild">
<div class="row">
<p>Web pages goes here</p>
</div>
</div>
<!-----Footer will come here ----->
Image :
Updated Answer
I found a nice article on Popping out of hidden overflows that seems to address the issue.
The problem is due to non-obvious behaviour of the combined overflow properties and nested view hierarchies from position: absolute/relative/fixed.
You need a non-overflowing parent element that acts as the positioning anchor for the sub-menus. I tried to strip down your example to the neccessary parts:
.menu {
position: fixed;
}
ul {
list-style-type: none;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px dashed #ccc;
}
.menu ul li {
/*
this seems to be the problematic property
position: relative;
*/
}
.menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
left: 80%;
background: red;
}
.menu ul li:hover {
background-color: #cccccc;
}
.menu ul li:hover > ul {
opacity: 1;
z-index: 10;
}
<div class="menu">
<ul>
<li>Customized Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul></li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>UserWise Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
But there is a problem with the positioning of the submenu which can be addressed with javascript. Check the article for a better explanation.
Personally I always try to avoid nested scrolling whereever I can. I suggest that you evaluate the possibility of scrolling the whole page when the menu grows. Also, I'd not rely on submenus that are shown by :hover or mouseover because they are not available on touch-controlled browsers.
Original Answer
In the CSS, the menu has set its horizontal overflow to hidden. The Popup-Menu will show up when you remove the overflow properties:
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
/*
Remove this props
overflow-x: hidden;
overflow-y: auto;
*/
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
It works when you remove those lines from your example code.
How to apply the css rules for hidden submenu? I've tried to add some JS, but there is a problem as it doesn't work.
Below there are the samle of the code I work about. Idea is that on the click to anchor text 'A' it should be shown a submenu. Thanks in advance for any advices.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px){
body{font-size:16px;}
}
#media only screen and (min-width:769px){
body{font-size:32px;}
}
ul li{list-style-type: none;}
li{display:inline;}
a, li a{
text-decoration: none;
outline: none;
color:#fff;
}
#menu{
width:100vw;
height:100vh;
display:block;
position:absolute;
top:0;
left:0;
background:#eacebe;
overflow:hidden;
}
#subBox{
max-width:0;
max-height:0;
overflow:hidden;
}
#subBox .open{
width:200px;
height:200px;
display:block;
position:relative;
background:gray;
color:#fff;
}
.skip{
clip: rect(0 0 0 0);
margin: -1px;
overflow:hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a><li> <!--A/1-->
<li><a href='/aTwo'>2</a></li> <!--A/2-->
<li><a href='/aThree'>3</a></li> <!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a><li> <!--B-->
<li><a href='/c'>C</a></li> <!--C-->
</ul>
</div>
</nav>
</div>
</body>
You were close. You're applying the .open class to #subBox, so change your selector to #subBox.open.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px) {
body {
font-size: 16px;
}
}
#media only screen and (min-width:769px) {
body {
font-size: 32px;
}
}
ul li {
list-style-type: none;
}
li {
display: inline;
}
a,
li a {
text-decoration: none;
outline: none;
color: #fff;
}
#menu {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
top: 0;
left: 0;
background: #eacebe;
overflow: hidden;
}
#subBox {
max-width: 0;
max-height: 0;
overflow: hidden;
}
#subBox.open {
width: 200px;
height: 200px;
display: block;
position: relative;
background: gray;
color: #fff;
overflow: visible;
max-height: 100%;
min-height: 100%;
}
.skip {
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a>
<li>
<!--A/1-->
<li><a href='/aTwo'>2</a></li>
<!--A/2-->
<li><a href='/aThree'>3</a></li>
<!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a>
<li>
<!--B-->
<li><a href='/c'>C</a></li>
<!--C-->
</ul>
</div>
</nav>
</div>
</body>
$(document).ready(function(){
$("#menu-trigger").click(function(){
$("#menu").slideToggle();
});
});
#menu {
width: 100%;
height: 35px;
}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
background: blue;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 10px 0 0;
position: relative;
background:blue;
}
ul.topnav li a {
color:red;
padding: 10px 5px;
float: left;
display:block;
font-size: 12px;
text-transform: uppercase;
font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
color: #fff;
text-decoration: none;
}
ul.topnav li a:hover {
background: violet;
color:white;
}
ul.subnav{
display:none;
position:absolute;
top:100%;
padding:0;
}
ul.subnav li{
list-style: none;
float:left;
width:100%;
}
ul.subnav a{
line-height:120%;
padding:10px 15px;
}
ul.topnav li:hover>ul.subnav{
display:block
}
#menu-trigger{
display:none;
}
#media screen and (max-width:600px){
#menu{
display:none;
}
#menu-trigger{
display:block;
}
ul.topnav li{
float:none;
}
ul.topnav li a{
float:none;
border-bottom:2px solid red;
}
}
<span id="menu-trigger">MENU</span>
<div id="menu">
<ul class="topnav">
<li><a>Home</a>
</li>
<li><a>About Us</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>History</a>
</li>
<li><a>Mission/Vision Statement</a>
</li>
</ul>
</li>
<li><a>Basic Education</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>The Basic Ed</a>
</li>
<li><a>About Basic Ed</a>
</li>
</ul>
</li>
<li><a>IB</a>
</li>
<li><a>College</a>
</li>
<li><a>Contact Us</a>
</li>
</ul>
</div>
I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.
Try this:
$(document).ready(function(){
$("#menu-trigger").on('click', function(){
$("#menu").slideToggle();
});
});
here you can take a look how it's working when you click on the #menu-trigger link
I'm a student learning some really basic HTML coding and I decided to use a simple JavaScript navigation bar so that the drop down menu has some animation speed.
The navigation bar was previously working but after adding my image slider it stopped working.
Thanks for the help!
// JavaScript NavBar
$( document ).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function () {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function () {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin:0;
padding:0;
}
body{
background:url(../images/subtle_white_mini_waves.png) repeat;
font-family:Tahoma, Geneva, sans-serif;
color: white;
}
#navbar{
margin-left:-400px;
position:absolute;
left:50%;
}
#navbar a{
text-decoration:none;
}
.button{
background:url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover{
background:#e6e6e6;
}
.button a{
padding: 34px 0px;
}
#navbar ul{
text-align:center;
}
#navbar ul li{
float: left;
display: inline;
font-size:16px;
height:89px;
}
#navbar ul li:hover{
background:#E6E6E6;
}
#navbar ul li a{
display:block;
color: #444;
}
#navbar ul li ul{
position:absolute;
width: 170px;
background:#fff;
}
#navbar ul li ul li{
width: 170px;
}
#navbar ul li ul li a{
display:block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a{
background:#f7f7f7;
}
#navbar ul li ul.fallback{
display:none;
}
#navbar ul li:hover ul.fallback{
display:block;
}
.shadows{
position:absolute;
z-index:10;
}
#shadowtopleft{
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowtopright{
float:left;
}
#shadowbottomleft{
margin-top: 83px;
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowbottomright{
margin-top: 83px;
float:left;
}
.banner {
z-index:-1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display:block;
float:left;
padding: 0px;
margin: 0px;
min-height:500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation</li>
<li>Family Strengthening</li>
<li>Community Integration</li>
<li>Support Programmes</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate</li>
<li>Volunteer</li>
<li>Sponsor</li>
<li>Partner</li>
<li>Join The Staff</li>
</ul>
</li>
<li>
<div id="logo">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board</li>
<li>News and Views</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
</ul>
</div>
<script>
$( document ).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>
Since you are a student, you might have not of heard of the z-index style property. The z-index property specifies the stack order of an element, especially if you are using position: absolute; a lot.
So your menu menu, #navbar, is there. It's just hidden under other elements, so you might want to add the z-index style to your code, like this:
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
I also thought that I'd mention that in your CSS code, you made a tiny error:
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
Should be:
.banner ul {
list-style:none;
padding: 0px;
margin: 0px;
}
I combined my answer and put it inside if the code snippet below.
// JavaScript NavBar
$(document).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function() {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function() {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/subtle_white_mini_waves.png) repeat;
font-family: Tahoma, Geneva, sans-serif;
color: white;
}
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
#navbar a {
text-decoration: none;
}
.button {
background: url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover {
background: #e6e6e6;
}
.button a {
padding: 34px 0px;
}
#navbar ul {
text-align: center;
}
#navbar ul li {
float: left;
display: inline;
font-size: 16px;
height: 89px;
}
#navbar ul li:hover {
background: #E6E6E6;
}
#navbar ul li a {
display: block;
color: #444;
}
#navbar ul li ul {
position: absolute;
width: 170px;
background: #fff;
}
#navbar ul li ul li {
width: 170px;
}
#navbar ul li ul li a {
display: block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a {
background: #f7f7f7;
}
#navbar ul li ul.fallback {
display: none;
}
#navbar ul li:hover ul.fallback {
display: block;
}
.shadows {
position: absolute;
z-index: 10;
}
#shadowtopleft {
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowtopright {
float: left;
}
#shadowbottomleft {
margin-top: 83px;
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowbottomright {
margin-top: 83px;
float: left;
}
.banner {
z-index: -1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display: block;
float: left;
padding: 0px;
margin: 0px;
min-height: 500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation
</li>
<li>Family Strengthening
</li>
<li>Community Integration
</li>
<li>Support Programmes
</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate
</li>
<li>Volunteer
</li>
<li>Sponsor
</li>
<li>Partner
</li>
<li>Join The Staff
</li>
</ul>
</li>
<li>
<div id="logo">
<a href="index.html">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</a>
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board
</li>
<li>News and Views
</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities
</li>
<li>Feedback
</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>
I can't get my submenu to stay/appear on the same line as its parent. I want it to be located within the transparent band that appears via mouse-over. I'm new to this, any advice is greatly appreciated.
Jsfiddle: http://jsfiddle.net/kn4Jx/
Exhibition should have a submenu with two links Current and Previous.
html:
<div>
<ul id="mainmenu">
<li id="liHome">
INFO
</li>
<li id="liServices" class="active">
EXHIBITIONS
<ul id="SubMenuY2" class="submenu">
<li>CURRENT</li>
<li>PREVIOUS</li>
</ul>
</li>
<li id="liEnvironment">
CV
</li>
<li id="liCareer">
NEWS
</li>
<li id="liContact">
MORE
</li>
</ul
</div>
and css:
body
{
background-color:#06F;background-size: 100%;
background-repeat:no-repeat;
}
#mainmenu
{
margin: 0;
padding: 0;
list-style-type: none;
position:relative;
}
#mainmenu li
{
clear: left;
position:relative;
}
#mainmenu a
{
display: block;
overflow: hidden;
float: left;
width:100%;
position:relative;
}
#mainmenu a:hover
{
background-position: 0 0;
background-color:clear;
background-color:rgba(255,255,255,0.5);
width:100%;
}
#mainmenu li.active a
{
background-position: 0 0;
background-color:clear;
width:100%;
}
.submenu
{
list-style-type: none;
float: left; display: none;
position:absolute;
right:900px;
top:0px;
}
#mainmenu li a:hover+.submenu, .submenu:hover
{
display:inline-block;
}
.submenu li
{
display: inline;
clear: none !important;
}
.submenu li a
{
float: right;
margin-left: 10px;
}
.maintextcolour
{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#FFF;
text-decoration: none;
}
.maintextcolour:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color:#0FF;
text-decoration: none;
}
Two small mistakes:
You have your .submenu absolutely positioned to right with
900px - so it's somewhere next to your monitor. Change it from
right to left and number 900px to 120px
List item from .submenu should be display like inline-block instead of inline
JSFiddle: http://jsfiddle.net/kn4Jx/4/