I'm creating a responsive nav bar with js, css and html. I have a problem right now, when the screen becomes x size (the size I defined as max-width) there is the pop up of the responsive nav bar. Although, only the last anchor (Loja) appears on that. I want it to be displayed flex and the flex-direction to column. As this prints shows:
https://imgur.com/aXjZD8z
https://imgur.com/8s0J6tc
https://jsfiddle.net/tL2vp9k5/1/
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
<li>Cursos </li>
<li>Conteúdos Especiais </li>
<li>Recursos</li>
<li> Contatos </li>
<li> Loja <i class="fa fa-shopping-cart" aria-hidden="true"></i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
/*Universal Commands*/
*{
padding:0;
margin:0;
text-decoration: none;
}
/*Nav bar*/
/*Background Menu*/
nav.menu {
width:100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu{
position:fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img{
width: 180px;
float:left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li{
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a{
display:block;
font-family: "Ubuntu", "Palatino", sans-serif ;
color:rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i{
font-size: 16px;
}
nav ul.ulSecções li a.loja{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/* Transition das anchors */
nav ul.ulSecções li a:hover {
color: rgb(255, 255, 255);
opacity: 1;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
nav ul.ulSecções li a:not(:hover) {
color: rgb(204, 174, 75);
opacity: 0.9;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
/*Mobile screen adjustments*/
#media screen and (max-width: 1250px){
nav ul.ulSecções li {
position: absolute;
right: 0px;
height: 92vh;
top: 14vh;
background-color: rgb(24, 24, 24);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
} ```
All your <li> elements have the exact same position, so they're layered on top of eachother. If I remove the background you can clearly see this (see image at the bottom).
you need to select your <ul> element, not the <li> elements
/* #media screen and (max-width: 1250px){
nav ul.ulSecções li { */
#media screen and (max-width: 1250px) {
nav ul.ulSecções {
Related
The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In #media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li>Home</li> -->
<li>Photography</li>
<li>Graphic Design</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #FCFCFC;
font-family: "operetta 8", serif;
font-weight: 300;
font-style: normal;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
}
.container { /* logo and text/links in navigation bar */
width: 90%;
margin: 0 auto;
}
.headerLogo { /* logo in navigation bar */
/* floating logo to the left */
/* full canvas photo is 2057px wide & 643px in height */
float: left;
padding: 10px 0; /* gives a little space on top and bottom of the logo */
width: 164.56px; /* 8% of the full size (2057px) */
height: 51.44px; /* 8% of the full size (643px) */
}
header {
background: #E9E9E9;
opacity: 1;
}
header::after {
/* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
content: '';
display: table;
clear: both;
}
nav {
/* floating list (menu) items to the right */
float: right;
}
nav ul {
margin: 0; /* takes space off top and bottom header background */
padding: 0; /* takes space off the sides */
list-style: none; /* removes bullet point styling */
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the spacd between the list items */
padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}
nav ul li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
nav ul li a:hover {
color: #3f003c;
}
nav ul li a::before {
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #3f003c;
position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
top: 0;
width: 0%;
transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}
nav ul li a:hover::before {
width: 100%;
}
a {
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
display: static;
z-index: 200;
}
.burger div {
width: 25px;
height: 3px;
background-color: #3f003c;
margin: 5px;
transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}
.mainLogo {
/* class for logo/image on index page */
width: 75%;
height: 60%;
opacity: 0.9;
}
.mainLogoDiv {
/* class for the div containing the logo/image on index page */
text-align: center;
}
.section {
max-width: 1920px;
margin: 0 auto;
padding: 1% 2%;
}
.grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.grid:after {
clear: both;
}
.grid:after, .grid:before {
content: '';
display: table;
}
.grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 5px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3 ease-in-out;
-moz-transition: 0.3s ease-in-out,
-moz-transform 0.3 ease-in-out;
transition: 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.05);
}
.p-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/mj-cover.jpg);
}
.p-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/lp-cover.jpg);
}
.p-cov3 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/pp-cover.jpg);
}
.p-cov4 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/la-cover.jpg);
}
.p-cov5 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/an-cover.jpg);
}
.p-cov6 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/se-cover.jpg);
}
.g-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/dc-cover.jpg);
}
.g-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/ww-cover.jpg);
}
.info {
position: absolute;
width: 100%;
height: 100%;
}
.info h3 {
font-family: "Operetta 8", serif;
font-weight: 400;
color: #e0e0e0;
text-shadow: 1px 1px black;
font-size: 20px;
margin: 0 auto;
padding: 85px 0px 0 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
grid-gap: 5px 5px;
width: 90%;
margin: auto;
}
.photoColumn {
display: block;
}
.contact {
margin: 0 auto;
}
.contact-me {
text-align: center;
}
.contact-me img {
width: 60%;
max-width: 450px;
padding: 10px 0 20px 0;
}
form {
text-align: left;
font-size: 13.5px;
padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
margin: 0 auto;
line-height: 30px;
height: 80%;
width: 70%;
max-width: 500px;
overflow: auto;
text-transform: uppercase;
color: #3f003c;
}
input[type=submit] {
background-color: #3f003c;
color: #E9E9E9;
border-radius: 5px;
height: 35px;
width: 100px;
font-size: 15px;
text-transform: uppercase;
}
/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
/* the two syntaxes below change the color of highlighted text */
::selection {
background: #E9E9E9; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #E9E9E9; /* Gecko Browsers */
}
/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#name {
height: 30px;
width: 100%;
}
#email {
height: 30px;
width: 100%;
}
#message {
height: 60px;
width: 100%;
}
footer {
color: #7F7887;
text-align: center;
text-decoration: none;
}
.fbIcon {
/* class for the facebook icon in the footer */
padding: 0 2px 8px 0;
width: 25px;
height: 25px;
opacity: .7;
}
.instaIcon {
/* class for the instagram icon in the footer */
padding: 0 0 8px 0;
width: 25px;
height: 25px;
opacity: 0.7;
}
#media screen and (max-width: 952px) {
.nav-links {
position: absolute;
right: 0px;
height: 100%;
top: 70px;
background-color: #E9E9E9;
opacity: .95;
display: flex;
flex-direction: column;
align-items: center;
width: 35%;
transform: translateX(100vw);
transition: transform 0.5s ease-in;
z-index: 100;
}
.nav-links li {
margin-left: 0px;
opacity: 0;
padding: 45px 0px 0px 0px;
}
.nav-links li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav-links li a:hover {
color: #3f003c;
}
nav ul li a::before {
display: none;
}
.burger {
display: block;
padding: 20px;
z-index: 150;
position: static;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
opacity: 0;
}
/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
I think your problem is that you're targeting both the html and body elements with your scroll settings #media screen and (max-width: 952px) - this causes a scroll within a scroll effect, which can be buggy in mobile views.
I was able to fix this in the inspector by removing html moving the body styles outside of the media query and changing the transform line in the .nav-links styles from 100% to 100vw. They should work the same in this scenario but vw (viewport width) seems to work better.
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}
I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!
You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.
I'm helping out a friend setup a responsive menu for his website, and from some initial research we failed to find ways we could achieve this with CSS3, and it seems like it's only achievable through javascript / jquery. Having never worked with such languages I was hoping you could help us achieve this:
We'd like to make the sub-menus expand by clicking their parent li whenever the screen resolution is 1200px or less.
Below is the HTML and CSS for the menu in question which currently expands on mouse hover.
HTML
<nav id="main_navbar_container" class="navbar navbar-default ">
<div class="container">
<div class="row">
<!-- Brand and expand button get grouped for better mobile display -->
<div id="main_logo_container" class="navbar-header">
<!--Main logo container-->
<div="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='test' rel='home'>
<div>
<img src='http://localhost/wordpress/wp-content/uploads/2015/10/2015.10.13-jbits.png'width="100px">
</div><!-- site-logo -->
</a>
</div>
<!--main logo container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="menu_container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav id="primary_menu" class="nav navbar-nav">
<div class="menu-home-screen-menu-container">
<ul id="menu-home-screen-menu" class="menu">
<li id="menu-item-447" class="menu-item-447">Home
</li>
<li id="menu-item-428" class="menu-item-428">About us
</li>
<li id="menu-item-429" class="menu-item-429">Recommendations
</li>
<li id="menu-item-427" class="menu-item-427">Gallery
</li>
<li id="menu-item-13" class="menu-item-13"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-421" class="menu-item-421">Evacuation Plans
</li>
<li id="menu-item-425" class="menu-item-425">Risk Assessment
</li>
<li id="menu-item-417" class="menu-item-417">Fire safety advice
</li>
<li id="menu-item-424" class="menu-item-424">Risk Management
</li>
<li id="menu-item-423" class="menu-item-423">Fire Training
</li>
<li id="menu-item-422" class="menu-item-422">Fire Drills
</li>
</ul>
</li>
<li id="menu-item-16" class="menu-item-16"><a>Products</a>
<ul class="sub-menu">
<li id="menu-item-430" class="menu-item-430">Fire blankets
</li>
<li id="menu-item-431" class="menu-item-431">Fire extinguishers
</li>
<li id="menu-item-432" class="menu-item-432">Fire alarms
</li>
</ul>
</li>
<li id="menu-item-426" class="menu-item-426">FAQs
</li>
<li id="menu-item-420" class="menu-item-420">Contact Us
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
#menu_container{
width:80%;
float:right;
display:block;
}
#primary_menu{
display:block;
float:left;
width:100%;
}
#primary_menu ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
color:#ea474b;
font-weight: 600;
display: block;
text-decoration: none;
padding: 15px 20px;
margin:auto;
}
#primary_menu a:hover{
color:#F9690E;
background: #f1f1f1;
}
#primary_menu li{
float:left;
position:relative;
margin:0
}
#primary_menu ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width:100%;
color: #8c9398;
position: absolute;
top: 3.5em;
max-height:0;
overflow-y: hidden;
}
#primary_menu ul li:hover ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width: 200px;
position:absolute;
padding:0;
margin:0;
max-height:400px;
left:-50px;
z-index:999;
transition: max-height 1s;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
}
.sub-menu li{
width:100%;
}
#primary_menu ul li ul a{
color:#ea474b;
}
#primary_menu ul li ul li:hover a{
color:#F9690E;
background: #f1f1f1;
}
#media (max-width: 1200px){
#main_navbar_container .container, #menu_container { width: 100%;}
#menu_container .navbar-collapse { padding: 0;}
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li ul {
border-radius: 0 !important;
border-color: transparent !important;
background-color:rgb(238,238,238);
display:block;
max-height:0;
-webkit-transition: all 0s;
transition: all 0s;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*\color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
display:block;
position:initial;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
max-height:400px;
transition:max-height 1s;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#menu-home-screen-menu{
margin-left:0;
}
}
Fiddle to explain: http://jsfiddle.net/ee7zdtb4/
Help is greatly appreciated.
Regards,
J
We'd like to make the sub-menus expand by clicking their parent li
whenever the screen resolution is 1200px or less
You would need to use media-queries to detect the screen size and then change your CSS accordingly.
it seems like it's only achievable through javascript / jquery
No. Not at all. You can very well do this with just a clever mix of elements with corresponding pseudo-classes and adjacent sibling selector. Hint: use hidden checkboxes with labels to control the sibling elements.
Here is a small demo. It's based on an old answer of mine, changed to add media-queries to allow for fully expanded accordion style menu when the screen is larger than 768px (you can tweak it to your use-case of 1200). It gets collapsed and then is controlled by click-able first-level menu items. No Javascript, just CSS.
In the fiddle, drag and resize the output pane to see it in action. In the snippet, click full-screen and back to see it in action. Use this demo to then take it forward for your exact use-case.
Demo Fiddle: http://jsfiddle.net/abhitalks/Lqpc2Len/
Demo Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion {
display: inline-block; vertical-align: top;
width: 240px; margin: 16px; border: 1px solid #ddd;
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label {
display: block; background-color: #eee;
padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before {
content: '→';
display: inline-block; margin-right: 6px;
font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
overflow: hidden; height: 0px; padding: 0px;
font-family: calibri, sans-serif; font-weight: 300;
background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }
#media screen and (min-width: 768px) {
div.content { height: 64px; padding: 6px; }
input + label::before { font-weight: 600; transform: rotate(90deg); }
}
<div class="accordion">
<input id="i12" name="handle2" type="checkbox" />
<label for="i12">One</label>
<div class="content">Lorem ipsum</div>
<input id="i22" name="handle2" type="checkbox" />
<label for="i22">Two</label>
<div class="content">Lorem ipsum</div>
<input id="i32" name="handle2" type="checkbox" />
<label for="i32">Three</label>
<div class="content">Lorem ipsum</div>
<input id="i42" name="handle2" type="checkbox" />
<label for="i42">Four</label>
<div class="content">Lorem ipsum</div>
</div>
You can achieve all your needs in responsiveness with css media queries. If you specify max-width condition and describe all your necessary css-classes behaviour for specified width, you would have another stylings for current element at different resolution. For example,
.foo-class {
background-color: green
}
.foo-class:hover {
background-color:red;
color: white;
}
#media only screen and (max-width: 768px) {
.foo-class {
background-color: blue;
}
.foo-class:hover {
background-color: white;
color: green;
}
}
So in this case when you have monitor/screen with actual width >768px element with class .foo-class will have green background and on hover it will be with red background and white text color. If your screen of width 768px or less, then this element will be of blue background and with white background and green text color on hover action. It does not need any additional javascript logic, its pretty simple.
Also you can use popular ui framework Bootstrap. It's very simple, has a lot of modern ui features and has built in responsive support
I have a 3*3 grid layout. It should look something like this:
Then I added shuffle.js to shuffle the grids and filter them. However, the grid layout turns into this.
Why did this happen and how to fix it?? Thank you
My HTML code:
<body>
<div id="wrapper">
<div id="menunav">
<header id="logo">Siyan Zhao</header>
<nav id="nav">
<ul>
<li>Portfolio</li>
<li>About Me</li>
<li>Skills</li>
<li>Resume</li>
</ul>
</nav>
<ul id="filter">
<li><a class="active" href="#" data-group="all">All</a></li>
<li>UI/UX</li>
<li>Design</li>
<li>Research</li>
<li>Illustration</li>
</ul>
</div>
<!--Main content in the format of grids-->
<div id="content">
<div class="grid3">
<article class="bucket">
<a href="firefly-ticket.html">
<img src="images/Firefly/firefly_icon.png" alt=""/>
<div class="img-overlay">
<h5>Firefly: A Smart Ticket</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="Chance.html">
<img src="images/Chance/Chance Icon_2.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "research", "ui"]'>
<h5>Chance</h5>
</div>
</a>
</article>
<article class="bucket" >
<a href="monogram.html">
<img src="images/monogram.jpg" alt=""/>
<div class = "img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Monogram</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="gestalt-composition.html">
<img src="images/gestalt-cover.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Gestalt Composition</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="redthread.html">
<img src="images/redThread.jpg" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>The Red Thread</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="typographic-hierarchy.html">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Typographic Hierarchy</h5>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©Siyan Zhao 2014</div>
</div>
</body>
My CSS code:
/* -------------------------------------*/
#wrapper {
background-color: #FFFfff;
width: 70%;
padding-bottom: 0px;
margin: 0 auto;
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* Left hand side menu style */
/* -------------------------------------*/
#menunav {
z-index: 20;
background-color: #ffffff;
position: fixed;
width: 210px;
padding-top: 80px;
display: block;
margin: 0px;
border-right-style: none;
border-color: rgba(0,0,0,1.00);
border-right-width: thin;
font-family: 'Droid Sans', sans-serif;;
font-weight: normal;
}
#logo {
text-align: left;
margin-bottom: 48px;
padding-top: 18px;
font-family: "Century Gothic";
font-weight: bold;
font-size:2.3em;
}
#menunav ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
}
#menunav #nav a{
text-align: left;
font-size: 1em;
padding-top: 18px;
border-color: rgba(0,0,0,1.00);
border-bottom-style: solid;
border-width: thin;
-webkit-transition: padding-left 0.3s ease-in-out;
-moz-transition: padding-left 0.3s ease-in-out;
-o-transition: padding-left 0.3s3 ease-in-out;
-ms-transition: padding-left 0.3s3 ease-in-out;
transition: padding-left 0.3s ease-in-out;
}
#menunav #nav a:hover {
padding-left: 50px;
}
#menunav #nav a:active, #mainnav a:focus, #menunav #nav a.thispage{
text-decoration: none;
font-weight: bold;
/*ovrwrite hover effect for active page */
padding-left: 0;
}
/* Formatting for main page grid area*/
/* -------------------------------------*/
.bucket {
float: left;
margin: 0% 0%;
position: relative;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
width: 33.3%;
}
.grid3 .bucket:nth-of-type(3n+1) {
clear: left;
}
.bucket img {
height: auto;
width: 100%;
/*Align image to the baseline to delete white spacing*/
vertical-align: bottom;
}
/*hover over overlay effect*/
/* -------------------------------------*/
.img-overlay {
background-color: rgba(0,0,0,0.7);
bottom: 0;
left: 0;
top: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
.img-overlay h5{
opacity: 1;
display: inline-block;
margin: auto;
font-weight: normal;
font-size: 1.3vw;
line-height: 1vw;
position: absolute;
top: 30%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.img-overlay p{
opacity: 1;
display: inline-block;
margin: auto;
position: absolute;
top: 47%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 1.2vw;
line-height: 1vw;
/*vertical-align: middle;*/
}
.bucket:hover .img-overlay {
opacity: 1;
}
My Javascript
$(document).ready(function() {
/* Shuffling buckets */
var $grid3 = $('.grid3');
$grid3.shuffle({
itemSelector: '.bucket'
});
$('#filter a').click(function (e) {
e.preventDefault();
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid3.shuffle('shuffle', groupName );
});
You should make sure that the container parent div are set:
#content {
position:relative;
}
or
#content . grid3 {
position:relative;
}
Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}
Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO