I'm working on the navigation bar for a website and currently the main menu is complete. However, the "Services" and "Products" buttons need to each have their own sub-menu. The sub-menu should normally be hidden from view and appears when the user mouse-overs on the respective button.
Here is a fiddle with the desired result. Obviously, I'd rather not use any javascript if possible.
The idea I had initially was to have sub-menu have position: absolute with a z-index value lower than that of the main-menu, so that it can slide underneath the main-menu. However, doing so messes up with the width if I give it width: 100% and since my site is responsive, I avoid static widths.
I also tried doing with relative positioning, but that doesn't work either.
Another thing I don't like with that approach is that the markup for the main menu and sub-menu get split. Is it possible to get the above result, but with this markup?
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul>
<li role="presentation">Link 1
<li role="presentation">Link 2
</ul>
</li>
<li role="presentation">Products
<ul>
<li role="presentation">Link 3
<li role="presentation">Link 4
</ul>
</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Here is my code:
CSS
body {
font-size: 0;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
header {
width: 100%;
height: 49px;
}
.nav {
display: block;
position: relative;
list-style: none;
background: #304770;
z-index: 10;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav li.active a:before {
width: 100%;
}
.nav li a:hover {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.nav li:nth-last-of-type(1) a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav li a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.subnav {
list-style-type: none;
display: block;
position: relative;
top: -49px;
margin: 0;
z-index: 1;
background-color: #ccc;
-webkit-transition: top 0.2s;
}
.subnav li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #EFEFEF;
display: block;
}
HTML
<div class="bodyframe div_container">
<header>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services</li>
<li role="presentation">Products</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<ul class="subnav">
<li>Test</li>
<li>1243</li>
</ul>
</header>
</div>
If you only need the submenu to mimic the one in the example, without using jQuery, using the second chunk of HTML with the CSS you supplied you could do:
nav:hover~ul {
top: 0px;
}
This shows the next ul element, in this case the subnav, whenever the nav is hovered over ("~" selector means select the ul element preceded by nav:hover).
However, if you want to do something more dynamic... id suggest just using JS/jQuery as well
Related
Current setup (plain HTML/CSS):
I've currently got this plain HTML/CSS setup, which is basically using a checkbox with no opacity, with labels acting as buttons (which they in fact are not).
Codepen: https://codepen.io/MikaTheDesigner/pen/MWVYGoz
Video of my current HTML/CSS-demo (and the result goal): https://i.imgur.com/ha3NL0V.mp4
<div class="nav">
<input class="menuBtn" type="checkbox">
<label class="menuLabel open">Menu</label>
<label class="menuLabel close">Close</label>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav {
pointer-events: none;
position: fixed;
z-index: 100;
width: 100vw;
height: 100vh;
}
.nav > .menuBtn {
cursor: pointer;
width: 122.43px;
height: 122.43px;
margin: 0 0 0 3rem;
pointer-events: initial;
position: absolute;
z-index: 99;
opacity: 0;
}
.nav > .menuBtn:checked ~ .menuLabel.open {opacity: 0;}
.nav > .menuBtn:checked ~ .menuLabel.close {opacity: 100%;}
.nav > .menuBtn:checked ~ .menuBox.transitionBox {left: 100%;}
.nav > .menuBtn:checked ~ .menuBox.BG {left: 0;}
.nav > .menuLabel {
color: black;
font-size: 1.5rem;
position: absolute;
z-index: 98;
margin: 3rem 0 0 3rem;
text-align: center;
transition: all 0.2s ease-in-out;
}
.nav > .menuLabel.open {
text-shadow: 0 0 2rem rgba(0,0,0,.5);
width: 122.43px;
}
.nav > .menuLabel.close {
opacity: 0;
}
.nav > .menuBox.transitionBox {
background-color: black;
width: 200%;
height: 100%;
position: absolute;
z-index: 100;
left: -200%;
transition: all 2000ms;
}
.nav > .menuBox.BG {
background: linear-gradient(to bottom, white, black);
background-size: cover;
width: 100%;
height: 100%;
pointer-events: auto;
position: absolute;
z-index: 96;
left: -100%;
transition-delay: 500ms !important;
transition: all 200ms;
}
.nav > .menuBox.BG > nav {
position: absolute;
z-index: 97;
width: 100%;
height: 100%;
}
.nav > .menuBox.BG > nav > ul {
list-style: none;
padding: 122.43px 3rem 3rem calc(6rem + 122.43px);
}
.nav > .menuBox.BG > nav > ul li {
color: white;
font-size: 2rem;
line-height: 2rem;
margin-bottom: 1.5rem;
}
.nav > .menuBox.BG > nav > ul li > a {
color: inherit;
display: block;
text-decoration: none;
transition: all 0.2s ease-in-out;
width: max-content;
}
.nav > .menuBox.BG > nav > ul li > a:hover {cursor: pointer;}
Goal:
My goal is for the menu to act in the exact same way, when clicking the labels .menulabel.open and .menuLabel.close, but using javascript instead of plain HTML/CSS.
I would change these current labels to a-tags or p-tags and using onClick-functions, when I get the javascript working.
Like linked at the top of the thread, this is my goal, but using javascript to make it react, and not using a plain checkbox:
https://i.imgur.com/ha3NL0V.mp4
What have I tried so far?
Besides the plain HTML/CSS-solution I have tried setting up, which I wouldn't argue is the right way to make the menu, I have also tried setting this script up in my HTML-document, inwhich does not seem to work as I want it to:
function openNav() {
document.getElementsByClassName("menuTransition").style.left = "100%";
document.getElementsByClassName("menuBox").style.left = "0";
}
function closeNav() {
document.getElementsByClassName("menuTransition").style.left = "-200%";
document.getElementsByClassName("menuBox").style.left = "-100%";
}
(the javascript was supposed to just style the two elements when clicking on one of the a-tags the exact same way the CSS reacts, when checking the checkbox and "activating" the menu)
<div class="nav">
<a class="menuLabel open" onClick="openNav()">Menu</a>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<a class="menuLabel close" onClick="closeNav()">Close</a>
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
</div>
(basically the same HTML as above, just removing the labels and replacing them with a-tags)
You can use a single class and toggle that class on the click of a button, something like this:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
document.getElementsByClassName("menuBox") return an array object .
you need to add the index , such as document.getElementsByClassName("menuBox")[0]
I am using using css transition to add an animated effected to my links when they are hovered over.
One of links needs to be underlined by default i.e when no other link is hovered over, it should remain underlined and when other links are hovered over, the underline in the first link should be removed. I have achieved this with jQuery by adding and removing a classs however, the animated effect is lost. Is there a way to get back this animated effect on the first link?
Also when the underline from the first link is removed, all other links seem to move up?
$(".c-f, .i-c, .c-u").hover(function() {
$('.o-c').removeClass("default-underline");
}, function() {
$('.o-c').addClass("default-underline");
});
body {
background: black;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
}
.pivot-nav li a:hover::after {
width: 100%;
}
.default-underline:after {
width: 100%;
}
.pivot-nav li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 4px;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.default-underline:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 4px;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
position: relative !important;
width: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline" href="#">Our Company</a></li>
<li class="pivot-nav-item"><a class="c-f" href="#">Link 1</a></li>
<li class="pivot-nav-item"><a class="i-c" href="#">Link 2</a></li>
<li class="pivot-nav-item"><a class="c-u" href="#">Link 3</a></li>
</ul>
I'd use CSS-only:
Remove the underline from the preselected element if:
we're hovering the entire UL
we're not hovering the preselected element
.pivot-nav:hover a.default-underline:not(:hover):after {
width: 0;
}
Example
body {
background: black;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
}
.pivot-nav li a:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 4px;
background: #fff;
transition: width 0.3s ease 0s;
}
.pivot-nav:hover a.default-underline:not(:hover):after {
width: 0;
}
.pivot-nav li a.default-underline:after,
.pivot-nav li a:hover:after{
width: 100%;
}
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="default-underline" href="#">Our Company</a></li>
<li class="pivot-nav-item">Link 1</li>
<li class="pivot-nav-item">Link 2</li>
<li class="pivot-nav-item">Link 3</li>
</ul>
I created a dropdown menu click, but it have a little weirdness. When I click the button dropdown, the dropdown menu has appear. But when I move my cursor to another (without click the button dropdown again), the dropdown menu dissapear and it has become hoverable dropdown menu not dropdown menu click (Sorry for my bad English)
How can I make the dropdown menu click always appear when I click the button dropdown and move the cursor?
(Here is my code)
HTML
<aside class="sidebar">
<ul>
<li><i class="material-icons">home</i>Homepage</li>
<li class="button_dropdown"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i>
<ul class="dropdown_menu">
<li>Create Events</li>
<li>List Events</li>
</ul>
</li>
<li><i class="material-icons">people</i>Peserta Events</li>
</ul>
</aside>
CSS
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
aside.sidebar ul li ul.dropdown_menu.active {
opacity: 1;
visibility: visible;
height: auto;
width: 100%;
background-color: #34495e;
left: 100%;
top: 0;
transition: all 0.5s;
}
Jquery
$(document).ready(function () {
$(".button_dropdown").click(function () {
$(".dropdown_menu").toggleClass("active");
});
});
I personally would use hover rather than click for a child menu. Let me know how you go with this. Stays active until clicked out.
aside.sidebar ul li ul.dropdown_menu {
display: none;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
left:200px;
top:0;
}
aside.sidebar ul li ul.dropdown_menu.active {
display: block !important;
}
Working in this snippet.
$(document).ready(function() {
$('.button_dropdown').click(function() {
$('.dropdown_menu').toggleClass('active');
});
});
aside.sidebar ul li ul.dropdown_menu {
display: none;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
left:200px;
top:0;
}
aside.sidebar ul li ul.dropdown_menu.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="sidebar">
<ul>
<li>Homepage</li>
<li class="button_dropdown">Events Organizer
<ul class="dropdown_menu">
<li>Create Events</li>
<li>List Events</li>
</ul>
</li>
<li>Peserta Events</li>
</ul>
</aside>
Without changing your code too much, you can just remove the pointer-events (clicks, etc.) by adding:
pointer-events:none; to aside.sidebar ul li ul.dropdown_menu
and
pointer-events:auto; to aside.sidebar ul li ul.dropdown_menu.active
The hoverable dropdown menu is because you have set the opacity property to 0 in your css aside (dropdown_menu). You must change opacity:0 to opacity:1. Here is your code with error:
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
Replace by (fixed opacity):
aside.sidebar ul li ul.dropdown_menu {
opacity: 1;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
I have a responsive navigation which is fixed at the top and goes from horizontal to vertical if screensize is <=800 px wide.
Now I'm trying to move the currently active link to the top of the navigation if the screen size is <=800 px wide, but I can't seem to find a way.
I tried Javascript but it won't keep the currently active link at the top since the page refreshes or changes when a link is clicked.
I tried to put the loop in an if-statement but that doesn't work, so I removed the if-statement.
I would really appreciate it if someone could help me solve this problem.
Here's the Javascript:
/*------------------------move active link to top------------------------*/
function moveLink(){
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var list = document.getElementById('nav').childNodes;
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click',function()
{nav.insertBefore(this, nav.childNodes[0])});
}
}
Here's the navigation html:
<nav>
<ul id="nav" class="topNav">
<li><a onclick="moveLink()" href="/">Placeholder1</a></li>
<li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
<li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
<li><a onclick="moveLink()" class="active" href="licenses.html">Placeholder1 / FAQ</a></li>
<li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
<li><a onclick="moveLink()" href="contact.php">Placeholder1</a></li>
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">
<img alt="open menu" src="graphics/menu.png" style="height: 30px; width: 30px;"></a>
</li>
</ul>
I have two stylesheets and the menu opens and closes via Javascript.
Here's my mobile css:
/*------------------------navigation------------------------*/
.topNav {
z-index: 1;
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
font-size: 0px;
background-color: rgba(0,0,0,0.8);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}
.topNav li {
display: inline;
}
.topNav li a {
font-size: 12px;
display: inline-block;
color: #fff;
text-decoration: none;
transition: color 0.2s ease-in-out;
line-height: 38px;
padding: 0px 0px 0px 20px;
}
.topNav li a:hover {
color: #777;
}
.topNav li a.active {
color: #999;
}
/*------------------------responsive navigation closed------------------------*/
.topNav li:not(:first-child) {
display: none;
}
.topNav li.icon {
float: right;
display: inline-block;
height: 38px;
vertical-align: middle;
transition: opacity 0.2s ease-in-out;
margin: 4px 5px 0px 0px;
width: 30px;
height: 30px;
padding-right: 20px;
}
.icon:hover {
opacity: 0.5;
}
/*------------------------responsive navigation opened------------------------*/
.topNav.responsive {
position: fixed;
top: 0px;
}
.topNav.responsive li.icon {
margin: 0 0 0 0;
position: absolute;
top: 4px;
right: 25px;
width: 30px;
height: 30px;
padding-right: 0px;
z-index: 1;
}
.topNav.responsive li.icon:hover {
opacity: 0.5;
}
.topNav.responsive li {
float: none;
display: inline;
}
.topNav.responsive li a {
display: block;
}
thanks in advance,
Ken
I think you could do this just using CSS using flexbox and order property.
#media (max-width: 800px) {
nav ul {
display: flex;
flex-direction: column;
}
.active {
order: -1;
}
}
order: -1 ensures that the list item will move to the top of the column.
I moved the class active to the li, instead of the a, to make this work a little easier.
codepen
snippet
body {
font-family: sans-serif;
}
nav {
background: grey;
padding: 20px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 8px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: white;
}
#media (max-width: 800px) {
nav ul {
display: flex;
flex-direction: column;
}
.active {
order: -1;
}
}
<nav>
<ul id="nav" class="topNav">
<li><a onclick="moveLink()" href="/">BEATS</a></li>
<li><a onclick="moveLink()" href="sounds.html">SOUNDS</a></li>
<li><a onclick="moveLink()" href="services.html">SERVICES</a></li>
<li class="active"><a onclick="moveLink()" href="licenses.html">LICENSES / FAQ</a></li>
<li><a onclick="moveLink()" href="downloads.html">DOWNLOADS</a></li>
<li><a onclick="moveLink()" href="contact.php">CONTACT</a></li>
</ul>
</nav>
I have a dropdown in menu. But it drops not the way I need.
but I need it to be aligned as a menu item. like in here:
could it be done simply with css?
html
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Account<b class="caret" style="float: right;"></b></a>
<ul class="dropdown-menu">
<li>Account Info</li>
<li>Billing Settings</li>
<li><a href="{% url 'dev_logout' %}" >Sign out</a></li>
</ul>
</li>
css:
.dropdown-menu {
background-color: black;
min-width: 100px;
width: 160px;
}
.dropdown-menu > li {
align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #cfeffd;
background-color: #333333;
background-image: none;
filter: none;
}
.dropdown-toggle {
min-width: 100px;
width: 125px;
}
.caret {
marging-left: 30px;
}
You can make it by setting position:relative to ".dropdown" and position: absolute to ".dropdown-menu" and his width to 100%.
li {
padding: 10px 20px;
}
.dropdown {
position: relative;
display: block;
background-color: #ff0;
width: 120px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
background-color: gray;
}
Here is a working example :
http://jsfiddle.net/5CB4Q/3/
Assign the DropDownList a CssClass like DDLStyle.
select.DDLStyle{text-align:middle;}
This works in most modern browsers, but not in IE.