Do you know where I can find a left side menu, with push content and a responsive design, which when collapse show icons of the menus, and when uncollapse show the entire menus.
exemple :
Image 1 : mouse is out of the menu
Image 2 : mouse is over of the menu
This menu is mine, but when I zoom on my page the menu take all the page and the center content is placed under the menu.
Ok Check This Live Demo..
Demo : https://codepen.io/kumarrishikesh12/pen/awEBmN
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:darkblue;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
<html>
<head>
</head>
<body><div class="area"></div><nav class="main-menu">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Typography and Icons
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Related
I have a problem with website. I create a website with navigation menu that on hover opens, but I can only set background color and I want to set linear-gradient background. I tried to edit code and add some, but isn´t working. Have you any ideas? Can you help me with this problem? Thank you very much.
<!DOCTYPE html>
<html>
<head>
<title>Domov | Webstránka MENU</title>
<link rel="icon" href="/minimenu.png">
<meta charset=utf-8>
</head>
<body style=background-image:blue><div class="area"></div><nav class="main-menu"><img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
<ul style="background-color:darkblue;">
<li>
<a href="/welcome.php">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Domov
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-book fa-2x"></i>
<span class="nav-text">
Domáce úlohy
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-users fa-2x"></i>
<span class="nav-text">
Suplovanie
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Známky
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Rozvrh hodín
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-leanpub fa-2x"></i>
<span class="nav-text">
Učebný materiál
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-gamepad fa-2x"></i>
<span class="nav-text">
Hry
</span>
</a>
</li>
<p> </p>
<p hidden>TU SA ZACINA SUBMENU</p>
<li>
<a href="#">
<i class="fa fa-bars fa-2x"></i>
<span class="nav-text">
Submenu 1
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bars fa-2x"></i>
<span class="nav-text">
Submenu 2
</span>
</a>
</li>
<p hidden>TU SA KONCI SUBMENU</p>
</ul>
<ul class="logout">
<li>
<a href="/index.php">
<i class="fa fa-sign-out fa-2x"></i>
<span class="nav-text">
Odhlásiť sa
</span>
</a>
</li>
</ul>
</nav>
<zarovnanie>
<h1>Vitajte, v uživeteľskej sekcii!</h1><br><p>Orientujte sa pomocou navigácie vľavo</p>
</zarovnanie>
<style>zarovnanie {
text-indent: 60px;
}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</body>
<style>#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:darkblue;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
</style>
</html>
</div>
The linear gradient background is wanted on the body element.
A couple of problems in the existing code: the style attribute in body is missing quotes around the value and the background-image has been given a color value but background-images require an image value.
This snippet puts a non-repeating background-image which is a linear-gradient going from top to bottom (the default direction) from blue to cyan.
Note that the body only has the height of its content, you probably want to give it at least the height of the viewport. And of course you will want to change the values within the linear-gradient to get whatever effect you want.
<!DOCTYPE html>
<html>
<head>
<title>Domov | Webstránka MENU</title>
<link rel="icon" href="/minimenu.png">
<meta charset=utf-8>
</head>
<body style="background-image:linear-gradient(blue, cyan);background-size: cover; background-repeat: no-repeat;">
<div class="area"></div>
<nav class="main-menu"><img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
<ul style="background-color:darkblue;">
<li>
<a href="/welcome.php">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Domov
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-book fa-2x"></i>
<span class="nav-text">
Domáce úlohy
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-users fa-2x"></i>
<span class="nav-text">
Suplovanie
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Známky
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Rozvrh hodín
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-leanpub fa-2x"></i>
<span class="nav-text">
Učebný materiál
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-gamepad fa-2x"></i>
<span class="nav-text">
Hry
</span>
</a>
</li>
<p> </p>
<p hidden>TU SA ZACINA SUBMENU</p>
<li>
<a href="#">
<i class="fa fa-bars fa-2x"></i>
<span class="nav-text">
Submenu 1
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bars fa-2x"></i>
<span class="nav-text">
Submenu 2
</span>
</a>
</li>
<p hidden>TU SA KONCI SUBMENU</p>
</ul>
<ul class="logout">
<li>
<a href="/index.php">
<i class="fa fa-sign-out fa-2x"></i>
<span class="nav-text">
Odhlásiť sa
</span>
</a>
</li>
</ul>
</nav>
<zarovnanie>
<h1>Vitajte, v uživeteľskej sekcii!</h1><br>
<p>Orientujte sa pomocou navigácie vľavo</p>
</zarovnanie>
<style>
zarovnanie {
text-indent: 60px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</body>
<style>
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
.main-menu {
background: darkblue;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
}
.main-menu>ul {
margin: 7px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
</style>
</html>
</div>
My app is supposed to have a side menu, to navigate the different cattegories.
When the user clicks on one of the buttons in the side menu, the app is supposed to show the selected category, but I cant figure out how to display the selected category.
The area next to the side menu should also resize when I open the side menu
Here is the code I have so far:
#import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.main-container {
display: flex;
flex-direction: row;
}
.menu-container {
height: 100%;
width: 50%;
}
.area-container {
height: 100%;
width: 50%;
}
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#212121;
/* border-right:1px solid #e5e5e5; */
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
<html>
<head>
</head>
<body>
<div class="main-container">
<div class="menu-container">
<nav class="main-menu">
<ul>
<li>
<a>
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
Stars Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Quotes
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="area-container">
<div class="area">
<p>Subscribe to Technoblade</p>
</div>
</div>
</div>
</body>
<link rel="stylesheet" href="index.css">
</html>
I hope you can help me, and stay safe!
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
what I want to do is I will give li:hover color according to the i class, but somehow I could not.
namely. If it has i.fa-facebook-f class in social_bookmarks class, I want li:hover background color to be red.
body {
color: black;
}
.social_bookmarks {
height: 30px;
z-index: 150;
-webkit-backface-visibility: hidden;
margin: 0 0 0 -9px;
}
.social_bookmarks li:hover {
background: red;
}
<div>
<ul class="social_bookmarks">
<li>
<a href="https://www.facebook.com/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
There are no parent selectors in CSS so you can not target fa-facebook-f to apply style to its parents. so you will need to use JavaScript or add new class to li that has fa-facebook-f in it.
Example:
document.querySelectorAll('ul.social_bookmarks > li * i').forEach(i => {
//for each i
if (i.classList.contains("fa-facebook-f") === true) {
//check if it contains facebook
i.parentElement.parentElement.classList.add("facebook");
//add class to its parent/parent element with is li
}
if (i.classList.contains("fa-youtube") === true) {
i.parentElement.parentElement.classList.add("youtube");
}
if (i.classList.contains("fa-twitter") === true) {
i.parentElement.parentElement.classList.add("twitter");
}
});
body {
color: black;
}
.social_bookmarks {
height: 30px;
z-index: 150;
-webkit-backface-visibility: hidden;
margin: 0 0 0 -9px;
}
.facebook:hover {
background: red;
}
.youtube:hover {
background: blue;
}
.twitter:hover {
background: gray;
}
<div>
<ul class="social_bookmarks">
<li>
<a href="https://www.facebook.com/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
I suppose you want only the icon itself to get that background-color on :hover, not the full line. In this case, add the .fab class to your selector, like ´.social_bookmarks li:hover .fa-twitter { ... }and similar for the other icon classes. That way only the icon which is achildof theli` will be assigned that background-color
body {
color: black;
}
.social_bookmarks {
height: 30px;
z-index: 150;
-webkit-backface-visibility: hidden;
margin: 0 0 0 -9px;
}
.social_bookmarks li:hover .fa-facebook-f {
background: red;
}
.social_bookmarks li:hover .fa-youtube {
background: yellow;
}
.social_bookmarks li:hover .fa-twitter {
background: pink;
}
<div>
<ul class="social_bookmarks">
<li>
<a href="https://www.facebook.com/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
try this
body {
color: black;
}
a{text-decoration:none;}
.social_bookmarks {
z-index: 150;
-webkit-backface-visibility: hidden;
margin: 0 0 0 -9px;
list-style:none;
}
.social_bookmarks li{display:inline-block;margin:10px;}
.social_bookmarks li i{
border-radius:50%;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
}
.social_bookmarks li:hover .fa-facebook-f{
background: #3b5a9a;
color:#fff;
}
.social_bookmarks li:hover .fa-youtube{
background: #f03a37;
color:#fff;
}
.social_bookmarks li:hover .fa-twitter{
background: #1aa9e1;
color:#fff;
}
<div>
<ul class="social_bookmarks">
<li>
<a href="https://www.facebook.com/">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
In this codepen: http://codepen.io/audn/pen/oBzOPK
You can see that the UL has this weird spacing between it, can anyone tell me why? I'm trying to have something next to it, but it makes it hard when it leaves this weird spacing.
HTML:
<nav class="bg-white">
<ul class="nav-top wrapper">
<li class="nav-top">
<a href="/" title="HOME" class="nav-top">
<i class="fa fa-home fa-lg" aria-hidden="true"></i><br><span class="meny-text">Home</span>
</a>
</li>
<li class="nav-top">
<a href="/pc.php" title="PC PRICE LIST" class="nav-top">
<i class="fa fa-desktop fa-lg" aria-hidden="true"></i><br><span class="meny-text">PC list</span>
</a>
</li>
<li class="nav-top">
<a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top">
<i class="fa fa-gamepad fa-lg" aria-hidden="true"></i><br><span class="meny-text">PS4 list</span>
</a>
</li>
<li class="nav-top">
<a href="/certified.php" title="CERTIFIED LIST" class="nav-top">
<i class="fa fa-certificate" aria-hidden="true"></i><br><span class="meny-text">Certified list</span>
</a>
</li>
<li class="nav-top">
<a href="/faq.php" title="FAQ" class="nav-top">
<i class="fa fa-question" aria-hidden="true"></i><br><span class="meny-text">FAQ</span>
</a>
<li class="nav-top">
<a href="#" class="nav-top" data-toggle="modal" data-target="#modal-staff">
<i class="fa fa-envelope-o" aria-hidden="true"></i><br><span class="meny-text">Staff</span>
</a>
</li>
<li class="nav-top">
<a href="/donate.php" title="DONATE" class="nav-top">
<i class="fa fa-paypal" aria-hidden="true"></i><br><span class="meny-text">Donate</span>
</a>
</li>
</ul>
</nav>
<div class="what" style="background-color: black; width: 100%; color: white; padding: 32px;">heh</div>
CSS:
body {
margin:0;
}
.nav-top {
background:red;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
li a.nav-top {
color:#34495e;
text-decoration:none;
padding:15px;
}
li a.nav-top:hover {
background-color:#f1f2f3;
color:#1798e5;
}
li.nav-top {
text-decoration:none;
float:left;
}
#media(max-width:700px) {
.nav-top {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:100%;
line-height:10px;
}
a.nav-top {
padding:5px;
}
}
#media(min-width:700px) {
.meny-text {
margin-left:10px;
}
}
.header {
margin-bottom:20px;
}
.bg-white {
background:white;
}
.modal-backdrop.fade.in {
display:none !important;
}
.item-prices {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
}
.item-prices > div {
margin:5px;
}
li a.nav-top {
color:#34495e;
text-decoration:none;
padding:15px;
}
li a.nav-top:hover {
background-color:#red;
color:#1798e5;
}
li.nav-top {
text-decoration:none;
float:left;
}
#media(max-width:700px) {
.nav-top {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:100%;
line-height:10px;
}
a.nav-top {
padding:5px;
}
}
If you are using chrome, it has a default margin size of 1 em for UL elements.
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
to get rid of it, you can add margin: 0 to your .nav-top element.
I made a collapse menu with Bootstrap, works fine, but I can't make it so the link has the same color as the button:
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
color: $white;
background-color: black;
}
.collapse-link a.collapsed:after {
content: "\e080";
background-color: white;
}
I would like the class="collapse-link" get the same background color as right now in the buttons in the right, so the full div will be following the buttons color when is collapse and when is not, right now just the buttons getting background color i would like the titles: test3 and test get the background color of the buttons beside.
jsfiddle: http://jsfiddle.net/Wc4xt/4377/
HTML:
<div class="sidebar">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<i class="pull-left fa-lg fa fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">test3
</a>
</div>
<div class="collapse in collapse-styled" id="collapseExample1">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
test List
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
Create
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test
</a>
</div>
<div class="collapse in collapse-styled" id="collapseExample">
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
link List
<i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
test
</div>
</li>
</ul>
</div>
</div>
CSS:
.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #2f3f4d;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav li {
text-indent: 22px;
line-height: 60px;
border-bottom: 1px solid #455b6f;
}
.sidebar-nav li a {
display: block;
height: 65px;
}
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
color: $white;
background-color: black;
}
.collapse-link a.collapsed:after {
content: "\e080";
background-color: white;
}
Add following css to make it work:
.collapse-link a.collapsed {
color: white;
}
a {
text-decoration:none;
}
ul li {
list-style:none;
}
Also check:
http://jsfiddle.net/mayankN/Wc4xt/4381/