This is my css code for my icons, the css code also changed my background and other stuff in my webpage how come. A lot of this CSS code is effecting my HTML code sort of making it not established i added colors but they won't run over the CSS code.
html {
font-size: 20px;
}
body {
background-color: #dde7f2;
padding: 50px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: white;
border-radius: 3.6rem;
cursor: pointer;
display: inline-block;
font-size: 2.0rem;
height: 3.6rem;
line-height: 3.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 3.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 3.6rem;
height: 3.6rem;
border-radius: 3.6rem;
margin: -1.8rem;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
/* Icons */
.icon-button i {
background: none;
color: White;
height: 3.6rem;
left: 0;
line-height: 3.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 3.6rem;
z-index: 10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
color: White;
}
This is my html code, creating links, is there something i should add or delete. The
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #dde7f2;
}
li a {
display: block;
color: #dde7f2;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color:#dde7f2;
color:Blue;
}
</style>
</head>
<body>
<ul>
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: White;
}
li {
float: center;
}
li a {
display: block;
color: Blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:Powderblue;
}
.active {
background-color: #dde7f2;
}
</style>
</head>
<body>
**<i class="icon-twitter"></i><span></span>
<i class="icon-facebook"></i><span></span>
<i class="icon-google-plus"></i><span></span>**
</body>
</html>
Related
Hey i new to this web code thing, and i need help from all of you.
I have side menu that i need to convert it to hamburger menu when the screen is small mobile sized.
I need all of this content <div id="mySidebar" class="sidebar"> to be hamburger menu on mobile scale ratio
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
You can do something like this, I guess you can do further editing to match style that you use but most of the css you can re-use. If you check snippet from below in full screen and try to resize your browser you will see how your menu switch to hamburger menu when window size becomes less than 1000px
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
display: flex;
align-items: center;
}
nav {
display: none;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
#media screen and (max-width: 1000px) {
.sidebar {
display: none;
}
nav {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<a href="#">
<li><i class="material-icons">home</i>Dashboard</li>
</a>
<a href="#">
<li><i class="material-icons">info</i>Monitoring</li>
</a>
<a href="#">
<li><i class="material-icons">settings</i>Settings</li>
</a>
<a href="#">
<li><i class="material-icons">logout</i>Logout</li>
</a>
</ul>
</div>
</nav>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
</html>
I have made 2 icon pngs that I would like to use instead of the ones I have here from Font Awesome. But how do I insert them? I can't browse through pictures when I select class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label but it doesn't seem to work at all.
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}
nav {
background: #036832;
position: fixed;
width: 100%;
z-index: 999;
}
nav .wrapper {
/* border */
max-width: 1250px;
padding: 0 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 65px;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
/* menu bar */
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 4px;
transition: all 0.4s ease;
}
.nav-links li a:hover {
background: #213B35;
}
.nav-links .drop-menu {
background: #046832;
line-height: 45px;
position: absolute;
opacity: 0;
visibility: hidden;
}
.nav-links li:hover .drop-menu {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.drop-menu li a {
/* drop menu teksten */
display: block;
font-weight: 400;
border-radius: 10px;
}
div.picture1 {
width: 153px;
height: 60px;
background-image: url('Carlsberglogof.png');
}
.nav-links .mobile-item {
display: none;
}
#media screen and (max-width: 970px) {
/* drop menu mobil */
.wrapper .nav-links {
position: fixed;
display: block;
height: 100vh;
width: 100%;
max-width: 350px;
background: #046832;
top: 0;
left: 0;
overflow-y: auto;
line-height: 50px;
padding: 50px 10px;
box-shadow: 2px 15px 15px;
}
.nav-links li {
margin: 10px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
visibility: visible;
padding-left: 10px;
max-height: 0px;
overflow: hidden;
}
#showdrop:checked~.drop-menu {
max-height: 100%;
}
.nav-links .drop-menu li {
margin: 0;
}
.nav-links .drop-menu li a {
font-size: 18px;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
font-size: 20px;
color: white;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.4s ease;
}
.nav-links .mobile-item:hover {
background: #213B35;
}
}
.wrapper input {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carlsberg</title>
<link rel="stylesheet" href="Style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<div class="picture1"> </div>
<ul class="nav-links">
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
<li>Forside</li>
<li>
Mød os
<input type="checkbox" id="showdrop">
<label for="showdrop" class="mobile-item">Mød os</label>
<ul class="drop-menu">
<li>Organisation</li>
<li>Historien bag</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
</div>
</nav>
</body>
</html>
Hope someone can help, have a good day! :D
Just do it with an img tag:
<img src="your_icon_src" alt="" width="20" height="20">
Description: I have a responsive navbar which is opening and closing perfectly fine.
Problem: When I click on a link, It doesn't close itself. I have to manually close it.
Kindly find the codebase below:
navbar.component.html
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<div class="header header-fixed">
<div class="navbar container">
<div class="logo">
<div class="logo">REYA</div>
</div>
<input type="checkbox" id="navbar-toggle">
<label for="navbar-toggle"><i></i></label>
<nav class="menu">
<ul>
<li><a (click)="goToHome('home')">Home</a></li>
<li><a (click)="goToBlogs('more-blogs')">Blogs</a></li>
<li><a (click)="goToServices('services')">Services</a></li>
<li><a (click)="goToContact('contact')">Contact</a></li>
<li><a>Login</a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<router-outlet></router-outlet>
navbar.component.css
body {
margin: 0;
}
.header-fixed {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #242424;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
line-height: 60px;
}
.navbar .logo {
height: 80px;
}
.navbar .logo:hover {
color: #777777;
}
.navbar nav {
flex: 8;
}
.navbar label {
user-select: none;
cursor: pointer;
padding: 28px 20px;
position: relative;
z-index: 3;
}
.navbar label i {
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
font-style: normal;
font-weight: normal;
}
.navbar label i:before,
.navbar label i:after {
content: '';
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navbar label i,
.navbar label i:before,
.navbar label i:after {
display: block;
background: #eee;
}
.navbar label i:before {
top: 5px;
}
.navbar label i:after {
top: -5px;
}
.navbar #navbar-toggle {
display: none;
}
.header #navbar-toggle:checked~.menu {
visibility: visible;
opacity: 0.99;
}
.header #navbar-toggle:checked~label {
background: #212121;
border-radius: 50%;
}
.header #navbar-toggle:checked~label i {
background: transparent;
}
.header #navbar-toggle:checked~label i:before {
transform: rotate(-45deg);
}
.header #navbar-toggle:checked~label i:after {
transform: rotate(45deg);
}
.header #navbar-toggle:checked~label:not(.steps) i:before,
.header #navbar-toggle:checked~label:not(.steps) i:after {
top: 0;
}
#media (max-width: 768px) {
.navbar nav {
visibility: hidden;
opacity: 0;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
display: table;
background: #ddd;
}
.navbar nav ul {
margin: 0;
padding: 20px 0;
display: table-cell;
vertical-align: middle;
}
.navbar nav li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.navbar nav li:hover {
background: #525151;
}
.navbar nav li:hover a {
color: #fff;
transition: all 0.3s ease-out;
}
.navbar nav li a {
color: #212121;
}
}
#media (min-width: 768px) {
.navbar nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
text-align: center;
list-style: none;
}
.navbar nav li {
flex: 1;
}
.navbar nav li a {
display: block;
padding: 0 8px;
font-size: 16px;
line-height: 60px;
color: #fff;
text-decoration: none;
}
.navbar nav li.active {
background: #555;
}
.navbar nav li:hover {
background: #333;
}
.navbar label {
display: none;
}
}
.navbar .logo {
flex: 3;
}
.navbar .logo a {
display: block;
font-size: 30px;
font-weight: bold;
color: #fff;
text-decoration: none;
margin-left: 20px;
margin-top: 10px;
}
.navbar .logo a:hover {
color: #4d4c4c;
transition: .2s;
}
I have tried many options including:
Commenting out most of the lines
Removing the media queries
Removing the click event
Nothing is working! Can somebody please help me?
I'm not sure how you implemented your JS functions, but I think I would simulate a click on the navbar toggler or just make a function called whenever the user navigates, that makes sure the navbar is closed after navigation.
I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideBar</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://kit.fontawesome.com/5e85fec85e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="banner">
<div id="header">
<h1>LOGO</h1>
</div>
<div id="menu">
<input type="checkbox" id="check">
<label for="check" class="show-menu-btn">
<i class="fa fa-bars"></i>
</label>
<ul class="dropdown">
<li>Home</li>
<li><>About</li>
<li>Contact</li>
<label for="check" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
</nav>
This is the css code. I want to create a sliding sidebar menu but it seems not to be working. I want it to slide when I click on the icon. I used css and checkbox to make enable this code but it seems not to be working.
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
* {
margin: 0;
padding: 0;
}
.banner {
background: #475050;
border-bottom: 2px solid black;
display: flex;
color: white;
line-height: 0.7;
}
#header {
padding: 15px 0 0 10px;
font-family: fantasy;
letter-spacing: 2px;
}
#menu {
margin-left: auto;
padding-right: 10px;
}
#menu ul {
display: flex;
}
#menu ul li {
list-style: none;
padding: 20px 10px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#menu ul li a {
text-decoration: none;
color: white;
cursor: pointer;
}
#menu ul li a:hover {
color: crimson;
}
#menu i, #check {
display: none;
}
#media (max-width: 486px) {
.banner {
display: block;
}
#header {
padding-bottom: 10px;
border-bottom: 2px solid black;
}
#header h1{
margin: 0;
font-size: 1.5rem;
line-height: normal;
font-weight: 700;
}
#menu {
width: 100%;
background-color: #475050;
}
#menu i {
display: block;
}
#menu ul {
display: block;
text-align: center;
padding: 15px 0;
width: 50%;
position: fixed;
height: 20%;
background: #475050;
right: -50%;
line-height: normal;
transition: 1.7s;
}
#menu ul li {
padding: 0;
padding-top: 5px;
}
#menu ul li a {
color: white;
text-decoration: none;
padding: 0;
width: 100%;
height: 100%;
}
#menu-hide {
display: none;
}
#menu-show {
display: block;
}
.show-menu-btn {
height: 24px;
width: 25px;
background-color: yellow;
text-align: center;
border-radius: 4px;
margin-top: -38px;
margin-left: 90%;
cursor: pointer;
transition: left 0.4s ease;
position: absolute;
color: black;
float: right;
}
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 1.2rem;
cursor: pointer;
}
.hide-menu-btn i,
.show-menu-btn i {
padding-top: 2px;
}
.hide-menu-btn {
position: relative;
float: right;
margin-top: -35%;
height: 24px;
width: 25px;
background-color: black;
text-align: center;
border-radius: 4px;
color: white;
}
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: crimson;
}
#menu i,
#check {
display: block;
}
#check {
position: absolute;
visibility: hidden;
z-index: 1111;
}
#check:checked ~ #menu ul{
right: 0%;
}
This is happening because you can't go back to parent elements once you are inside their children elements. So instead of
#check:checked ~ #menu ul{
right: 0%;
}
remove #menu because you are already inside #menu element, instead use this:
#check:checked ~ ul{
right: 0%;
}
Here is the working fiddle: https://jsfiddle.net/q9vsry40/2/
I am trying to figure out a way to make the black blob go back smoothly as you're dragging the cursor off it. Better yet I was wondering if its possible to make the blob disappear from left to right using css. Also, do you have an idea on how to make the text turn white as the blob goes over them? Thank you so much for help!
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
width: 0%;
height: 1.3em;
background-color: black;
visibility: hidden;
transition: width .2s;
}
li a:hover::before {
width: 100%;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>
No need to use visibility since you already set 0% to width. You can also adjust the position to have a left to right transtion. For the color, simply add another hover declarion on the a:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
width: 0%;
left: auto;
right: 0;
height: 1.3em;
background-color: black;
transition: width .2s, left .2s .2s, right .2s .2s;
}
li a:hover::before {
width: 100%;
left: 0;
right: auto;
}
li a:hover {
color: #fff;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
You can also simplify your code using gradient:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
transition:
color 0.2s,
background-size 0.2s,
background-position 0.2s 0.2s;
}
li a:hover {
color: #fff;
background-size: 100% 100%;
background-position: right;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
i have updated your css code. hope this helps you:
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
li a:hover::before {
width: 100%;
visibility: visible;
}
li a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>