I am trying to modify a CSS only menu that implements a horizontal flyout. The original code does it on hover. I am trying to achieve the same thing on touch/tap - that is: tap once to show it, tap again to close it.
Is this possible using pure CSS ?
I've inserted the code below, but please refer to the codepen - it renders better. The challenge I am facing is right now I have to keep it pressed for the menu to show - how do I toggle without using javascript?
The codepen: http://codepen.io/pliablepixels/pen/WwPgwg
/*
Forked from http://codepen.io/IanLunn/pen/NPapxy */
/*
sass flyout.scss >flyout.css (sudo gem install sass)
or sass flyout.scss --style compressed >flyout.min.css
"IL" logo Copyright (c) Ian Lunn Design Limited 2015
Modified by pliable pixels
*/
.drawer {
position: absolute;
z-index: 10;
top: 0;
left: 0;
/*height: 100%;*/
padding: .4em 0;
background: #7D294E;
color: white;
text-align: center;
/* Remove 4px gap between <li> */
font-size: 0;
}
.drawer li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
transform: translateZ(0);
}
.drawer a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
/* Reset font-size */
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.2s;
}
.drawer a:active, .drawer a:focus {
background: #B44659;
}
.drawer i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.drawer span {
font-size: .625em;
font-family: sans-serif;
text-transform: uppercase;
}
.drawer li:active ul {
/* Open the fly-out menu */
transform: translateX(0);
background: #B44659;
/* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
display: block;
/* Fly out menus */
}
.drawer > li > a {
background: #7D294E;
}
.drawer > li:active, .drawer > li:focus {
z-index: 100;
}
.drawer > li:active, .drawer > li:focus a {
background: #B44659;
}
.drawer > li a:active {
background: #F56356;
}
.drawer > li ul {
position: absolute;
/* Stack below the top level */
z-index: -1;
top: 0;
left: 100%;
/* height: 100%;*/
width: auto;
white-space: nowrap;
/* Close the menus */
transform: translateX(-100%);
background: #B44659;
transition: 0.2s transform;
}
<ul class="drawer">
<li>
<a href="">
<span>Info</span>
</a>
<ul>
<li>
<a href="http://www.google.com">
<span>Item 1</span>
</a>
</li>
<li>
<a href="http://www.google.com" >
<span>Item 2</span>
</a>
</li>
<li>
<a href="http://www.google.com">
<span>Item 3</span>
</a>
</li>
</ul>
</li>
</ul>
Check out the following code, that should work for you.
Show
<div id="something">Bingo!</div>
CSS:
#something {
display: none;
}
#something:target {
display: block;
}
Heres a codepen: http://codepen.io/anon/pen/EKreRy
The following code work for me
<!DOCTYPE html>
<html>
<body>
<a href="#something" id='target'>Show</a>
<div id="something">Bingo!hide</div>
<style>
#something {display: none;}
#something:target {display: block;}
#target:target #something{display: none;}
</style>
</div>
</body>
Related
I've been working on a navigation bar. I've got it styled the way I like, but for some reason am having issues getting submenus to work.
The code looks like:
<div id="head">
<input id="toggle" type="checkbox">
<label for="toggle" class="icon">
<div><!-- --></div>
<div><!-- --></div>
<div><!-- --></div>
</label>
<div id="nav">
<div>
<ul>
<li class="page_item page-item-8">Home</li>
<li class="page_item page-item-10 page_item_has_children">About
<ul class="children">
<li class="page_item page-item-22 page_item_has_children">Once More
<ul class="children">
<li class="page_item page-item-23 page_item_has_children">Another Sub Page
<ul class="children">
<li class="page_item page-item-25">Final Link</li>
<li class="page_item page-item-24">Something Else</li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-21">Another Page</li>
<li class="page_item page-item-20">Subpage</li>
</ul>
</li>
<li class="page_item page-item-13 current_page_item">Shop</li>
<li class="page_item page-item-9">FAQ</li>
<li class="page_item page-item-11">Contact</li>
</ul>
</div>
</div>
</div>
The CSS looks like:
/* Toggle */
#toggle {
display: none;
}
/* Nav */
#nav li.current_page_item a {
background: #d2b48c;
border-radius: 40px;
color: #260f03;
}
#nav li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #fff;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 4px;
margin: 20px;
padding: 10px 10px 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
/* Media */
#media screen and (max-width: 600px) {
/* Icon */
.icon {
background: #260f03;
margin: 0 auto;
padding: 20px 20px 30px;
position: absolute;
width: 100%;
z-index: 500;
}
.icon div {
background: #d2b48c;
border-radius: 3px;
height: 2px;
margin: 10px auto 0;
position: relative;
transition: all 0.3s ease-in-out;
width: 3em;
}
/* Toggle */
#toggle:checked + .icon div:nth-child(1) {
margin-top: 25px;
transform: rotate(-45deg);
}
#toggle:checked + .icon div:nth-child(2) {
margin-top: -2px;
transform: rotate(45deg);
}
#toggle:checked + .icon div:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .icon + #nav {
top: 0;
transform: scale(1);
}
/* Nav */
#nav {
background: rgba(38, 15, 3, 0.95);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: -100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
z-index: 200;
}
#nav div {
height: 100%;
overflow: hidden;
overflow-y: auto;
position: relative;
}
#nav ul {
padding-top: 90px;
text-align: center;
}
#nav li a:before {
background: #fff;
content: '';
height: 0;
left: -0.5em;
position: absolute;
transition: all 0.2s ease-in-out;
width: 0.25em;
}
#nav li a:hover:before {
height: 100%;
}
}
#media screen and (min-width: 601px) {
/* HIDE the dropdown */
#nav li ul { display: none; }
/* DISPLAY the dropdown */
#nav li:hover > ul {
display: block;
position: absolute;
}
/* Nav */
#nav ul {
background: #260f03;
font-size: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav li a:hover {
border-bottom: 1px solid #d2b48c;
border-top: 1px solid #d2b48c;
}
}
JS Fiddle (with submenus):https://jsfiddle.net/2v8zhL3e/1/
JS Fiddle (without submenus): https://jsfiddle.net/b0mj7gp4/
I've found a bunch of tutorials on how to do this, but they are all using a float on the li.
I did have a go at it...
I hid the dropdown: #nav li ul { display: none; }
Then I showed it on hover:
#nav li:hover > ul {
display: block;
position: absolute;
}
Which kind of works...but the links show to the left of the main navigation item, I'd like to just tweak this so the links are stacked and show centered under their corresponding header.
I feel like I'm close, can anyone point me in the right direction?
Thanks,
Josh
You can add display: flex to the li:hover ul, then make the flex-direction: column and make the non-hover event position: absolute, left: 0. This creates an issue with the ul child element floating to the far left. So to fix this issue, you need to style its parent to have a relative position. The following should do the trick.
#nav li {
position: relative;
}
#nav li ul {
left: 0;
position: absolute;
}
#nav li:hover > ul {
display: flex;
flex-direction: column;
}
You haven't position: relative in li.
And, it would be better to use position: absolute without hover, in default.
#nav li {
position: relative;
}
#nav li > ul {
position: absolute;
display: none;
}
#nav li:hover > ul {
display: block;
}
I got a dropup button on my mobile footer, but the dropup button only opens on hover.
How can I change the code that the dropup menu will be visible only when clicking on it?
<li class="dropup">
<span class="menu-icon fas fa-bars"></span>More
<ul class="dropup-content" style="right: 10px;bottom: 70px">
<li>{lang:"core","usermenu_favorites"}</li>
<li>{lang:"core","usermenu_visitors"}</li>
</ul>
</li>
and the CSS:
.dropup {
position: relative;
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
bottom: 50px;
z-index: 1;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {background-color: #ccc}
.dropup:hover .dropup-content {
display: block;
}
.dropup:hover .dropbtn {
background-color: #2980B9;
}
instead of using the css :hover use javascript to add and remove .hover class to the .dropup-content element when the .dropdown-toggle element is touched/clicked.
.dropup-content {
display: none;
/* position: absolute; */
background-color: #f1f1f1;
min-width: 160px;
bottom: 50px;
z-index: 1;
}
.dropup-content.hover {
display: block;
}
I have a logo image on the upper left side of the site and want my nav to show on the upper right side of the site. The nav is showing on the right side of the page but instead of being parallel to the logo it is below it even thought the logo is on the left side. Any idea what I am missing in the code below that is preventing the nav from moving up.
#charset 'UTF-8';
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
<!-- font-size: 1vw;>
background: white;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
a, a:visited {
color: inherit;
}
header {
position: fixed;
padding: 1.5em;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.site-logo {
width: 30%;
max-width: 30%;
position: relative;
display: block;
}
.site-logo img {
width: 22em;
}
.logo {
opacity: 1;
}
.site-nav {
position: relative;
float: right;
z-index: 400;
top: 0;
left: 0;
display: block !important;
width: 68%;
padding: .75em 1em 0 0;
opacity: .95;
background: none;
}
.site-nav ul {
list-style-type: none;
margin: 0;
text-align: right;
}
.site-nav ul li {
display: inline-block;
margin-bottom: 0;
margin-left: 1.5em;
}
.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid black;
}
HTML
<header>
<!-- Logo -->
<a class="site-logo">
<img class="logo" src="images/SBI Logo.png" alt=""/>
</a>
<!-- Navigation Menu -->
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
enter image description here
You are getting bogged down in the style sheet and using EM too, it would be much easier for you to use PIXELS instead of EM to position your elements.
<style>
.mysitelogo
{
margin-top: 16px;
width: 458px;
height: 114px;
}
.mysitenav
{
float: right;
padding: 8px;
opacity: .95;
}
</style>
<header>
<!-- Logo -->
<img class="mysitelogo" src="logo.gif" alt="" />
<!-- Navigation Menu -->
<nav class="mysitenav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
Using the code above you can get the layout you desire, THEN fine tune your layout in the stylesheet.
Some times it is easier to break the bigger problem down into basic parts.
Read this page for better understanding of using EM which is relative to FONT SIZE
https://www.w3schools.com/CSSref/css_units.asp
So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?
Not only that, but this is what happens when I hover over it:
Is it possible to also only have the darker background fill the actual black bar it sits inside?
This is the snippet from my style sheet as well:
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
}
.navbar {
height: 5%;
overflow: auto;
margin: auto;
width: auto;
min-height: 60px;
top: 0;
text-align: center;
}
.title {
display: block;
}
.navbar ul {
list-style-type: none;
position: fixed;
top: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
All help is greatly appreciated! First time playing around with CSS!
EDIT:
Here is the snippet of HTML that creates this header
<link rel="stylesheet" type="text/css" href="style/style.css">
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contracts</li>
<li>Other</li>
</ul>
</div>
</header>
Fix the header...not the navbar or the menu.
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {} .title {
display: block;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
body {
height: 2000px; /* so you can see the header NOT moving */
}
<header>
<div class="navbar">
<ul>
<li class="hvr-underline">Home
</li>
<li>About Us
</li>
<li>Contracts
</li>
<li>Other
</li>
</ul>
</div>
</header>
Right now the parent menu has an opacity shift on hover, this is being transferred to the sub menu (current & previous) as well. I want the sub menu to have a clear background so that the opacity band of the parent is the only thing that is visible. Is there a way to use an li class for the submenu that makes it exempt from the li class that is governing the parent. I've been trying different things but can't seem to make it work properly.
Demo
HTML
<div>
<ul id="mainmenu">
<li class="liHome">
<a class="maintextcolour" href="#item-x1y1" id="Home" rel=
"none">INFO</a>
</li>
<li class="liServices">
<a class="maintextcolour" href="#item-x1y2" id="Services" rel=
"SubMenuY2">EXHIBITIONS</a>
<ul class="submenu" id="SubMenuY2">
<li class="sub1">
<a class="maintextcolour" href="#">CURRENT</a>
</li>
<li class="sub1">
<a class="maintextcolour" href="#">PREVIOUS</a>
</li>
</ul>
</li>
<li id="liEnvironment">
<a class="maintextcolour" href="#item-x1y3" id="Environment"
rel="none">CV</a>
</li>
<li id="liCareer">
<a class="maintextcolour" href="#item-x1y4" id="Career" rel=
"none">NEWS</a>
</li>
<li id="liContact">
<a class="maintextcolour" href="#item-x1y5" id="Contact" rel=
"none">MORE</a>
</li>
</ul>
</div>
CSS:
#charset UTF-8;
/* CSS Document */
body {
background-color: #666;
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;
opacity: 1;
-webkit-transition: all .4s ease-in-out;
padding-left: 20px;
}
#mainmenu li:hover a {
background-position: 0 0;
background-color: clear;
background-color: rgba(255,255,255,0.5);
width: 100%;
opacity: 0;
-webkit-transition: none;
}
#mainmenu li.active a {
background-position: 0 0;
background-color: clear;
width: 100%;
}
.submenu {
list-style-type: none;
float: left;
display: none;
position: absolute;
left: 135px;
top: 0;
width: auto;
}
#mainmenu li a:hover + .submenu,.submenu:hover {
display: block;
}
.submenu li {
display: inline-block;
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;
}
.headertext {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
Here is the updated Fiddle link. I have just added color to the following css:
#mainmenu > li:hover > a {
background-position: 0 0;
background-color:clear;
color:#0fffff;
background-color:rgba(255,255,255,0.5);
width:100%;
\
opacity: 0;
-webkit-transition: none;
}
Hope you want this.