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/
Related
Me and my friend are pretty new to html and css, he knows a little bit of javascript and we're trying to fix this one issue we're having right now.
We made a couple of buttons and added a dropdown menu to one of them using li and ul, the first thing we tried to fix was for the dropdown menu to not push down the remaining elements or text or the content below it. We managed to do that, however, now whenever you mouseover/hover the dropdown menu button which is "Products" in our case, the background of the dropdown menu blocks the mouseover so the highlighted background of the button itself won't be completely shown and the mouseover doesn't work on the entire area of the button.
ul {
text-align: center;
list-style: none;
overflow: hidden:
}
ul li a {
text-decoration: none;
color: red;
text-align: center;
padding: 10px;
font-size: 18px;
float: left;
text-decoration: none;
font-weight: bold;
font-family: Garamond, serif;
}
ul li ul {
display: none;
background-color: blank;
}
ul li a:hover {
color: #fff;
border-radius: 10px;
background-color: blank;
text-decoration: none;
color: rgb(0, 204, 204);
background: rgb(128, 128, 128);
font-weight: normal;
transition: all 0.21s ease-in-out;
}
ul li ul.dropdown {
display: none;
position: absolute;
background-repeat: no-repeat;
height: 0;
transition: all 1s ease-in-out;
}
ul li:hover ul.dropdown {
display: block;
height: 200px;
opacity: 1;
}
.navigation ul {
display: flex;
}
<body>
<div class="navigation">
<ul>
<li><span><ion-icon name="home-outline"></ion-icon></span><span> Home</span></li>   
<li><span><ion-icon name="information-circle-outline"></ion-icon></span><span> About</span></li>   
<li class="pro">
<span><ion-icon name="bar-chart-outline"></ion-icon></span><span> Products ▾ </span>   
<ul class="dropdown">
<br>
<li><span>Laptops</span></li>
<li><span>Monitors</span></li>
<li><span>Printers</span></li>
</ul>
</li>
<li><span><ion-icon name="mail-open-outline"></ion-icon></span><span> Contact</span></li>
</ul>
</div>
</body>
One solution is to position the dropdown at the bottom of the menu button with top:100%. That way, the dropdown will not block the menu button.
Note that absolute positioning places the dropdown "relative to its closest positioned ancestor" (see position), so I've added position:relative to the dropdown's parent <li> to make it "positioned".
ul {
list-style: none;
padding: 0;
}
.navigation > ul {
display: flex;
}
ul li a {
display: block;
color: red;
padding: 10px;
font-size: 18px;
text-decoration: none;
font-weight: bold;
font-family: Garamond, serif;
}
ul li a:hover {
border-radius: 10px;
color: rgb(0, 204, 204);
background: rgb(128, 128, 128);
transition: all 0.21s ease-in-out;
}
.navigation > ul > li {
position: relative;
}
.dropdown {
display: none;
position: absolute;
top: 100%;
transition: all 1s ease-in-out;
}
li:hover .dropdown {
display: block;
}
<div class="navigation">
<ul>
<li><span><ion-icon name="home-outline"></ion-icon></span><span> Home</span></li>
<li><span><ion-icon name="information-circle-outline"></ion-icon></span><span>About</span></li>
<li>
<span><ion-icon name="bar-chart-outline"></ion-icon></span><span>Products ▾</span>
<ul class="dropdown">
<li><span>Laptops</span></li>
<li><span>Monitors</span></li>
<li><span>Printers</span></li>
</ul>
</li>
<li><span><ion-icon name="mail-open-outline"></ion-icon></span><span>Contact</span></li>
</ul>
</div>
I'm designing a one-page scrolling website. When I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), the hamburger icon disappears. I can't get it back unless I refresh the page. The nav bar also disappears at full screen width after clicking on a page link once. I would like to keep the hamburger icon and the top navigation in view at all times. The javascript I'm using to collapse the full-screen menu that shows up at 780px is causing this problem, but I need it, or the menu will not disappear when a link is clicked. Thank you to anyone who can help!
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>
You need to add the toggle to the checkbox as well. It is an jQuery function, that uses specific animations and styles.
$('#show-menu').click(function() {
$('#menu').slideToggle();
});
EDIT
I added a working example. I did not used the toggle here, for a better design. Now the menu also toggels with the click on the checkbox :-)
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
$('#show-menu').change(function() {
if(this.checked)
$('#menu').slideDown();
else
$('#menu').slideUp();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>
$(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 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>
I created a little responsive Navigation which works fine. I also want to add a link on the right side of my navigation for "Account".
My idea was to insert a div into a ul but I think that is not w3c conform.
<div class="navigation">
<ul>
<li>Welcome</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">Account</div>
</ul>
Navigation
Here is a JS Fiddle Demo
Important is that i want the "account" on the right side, not side by side with the other navigation items. Under 700px screen size it should be under the contact li.
Should look like this: http://www.directupload.net/file/d/3718/xneivu5d_png.htm
Sorry for my bad english. I hope you can understand my problem and maybe you have a good idea to solve this.
Your .navigation li{ float: left;} CSS is pulling all <li> elements to the left.
Add the <li> tag for "Account" like so, with a new account class.
<li class="account">Account</li>
And add to your CSS:
.account{
float: right !important;
}
Updated JS Fiddle
Also, you're going to have to adjust your media query width for menu collapse since the account is now appearing on a second line in a small screen width just before the menu collapses.
EDIT:
As what I thought you wanted was incorrect, I've decided to update my answer.
http://jsfiddle.net/AlexCharlton/bb26gau3/3/
<body>
<div class="navigation">
<ul>
<li>Winterhalder</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">
<ul>
<li>Account</li>
</ul>
</div>
</ul>
Navigation
</div>
</body>
CSS:
.account {
float:right;
}
get your .account div OUT of the UL, and then you can style it. Like this:
<div class="navigation">
<ul>
<li>Winterhalder
</li>
<li>Me
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
<div class="account">Account</div> Navigation
</div>
then in CSS add this:
`/* NAVIGATION */
.navigation {
width: 100%;
height: 50px;
background: #34495E;
position: fixed;
top: 0;
}
.navigation ul {
width: auto;
max-width:960px;
height: 50px;
margin: 0px auto;
padding: 0px;
float:left;
}
.account {
float:right;
margin:0px 20px
}
.navigation li {
display: inline;
float: left;
}
.navigation a, .account, .account a {
font: 400 14px Open Sans;
color: #FFF;
width: 140px;
line-height: 50px;
text-align: center;
display: inline-block;
}
.navigation a:hover, .navigation a:active {
color: #1abc9c;
}
.navigation a.pull {
display: none;
}
/* RESPONSIVE */
#media screen and (max-width: 960px) {
.navigation {
height: auto;
}
.navigation ul {
width: 100%;
display: block;
height: auto;
}
}
#media screen and (max-width: 560px) {
.navigation {
height: auto;
}
.navigation ul {
display: none;
}
.navigation li {
display: block;
float: none;
width: 100%;
}
.navigation a.pull {
display: block;
background-color: #2C3E50;
width: 100%;
position: relative;
}
.navigation a.pull:after {
display: inline-block;
}
.navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}`
You may need some minor adjustments because I'm not 100% sure if this is what you need, but it will help you to find out how to do it. See fiddle here