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>
Related
I'm pretty new to using css and html. I don't know why the nav part doesn't have the same background and it's not at the same height as the logo.
I'd really appreciate the help!
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>
What I've done is following:
header {
display: flex;
justify-content: space-between;
align-items:center;
}
and removed display: block; from nav a
Hopefully this makes sense and it doesn't need explanation. If yes, tell me, I will explain it to you.
This way, it's fixed. Full code:
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
}
header {
display: flex;
justify-content: space-between;
align-items:center;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>
you can use flex with space between and align item center.
* {
border: 1px solid red;
}
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>
I have sticky left nav bar, I would like to active nav as per page, I did class active for related page nav items but now I moved to header single one master page now I added active class in any nav item the only one active nav shows whatever page I am is on. I need active item as per page nav, please help.
.navbar {
position: fixed;
background-color: #C8E8E9;
transition: width 600ms ease;
overflow: hidden;
z-index:9;
border-radius:0px!important;
top: 0;
height: 100vh;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: max-content;
font-family: 'Open Sans';
}
.nav-item {
width: 100%;
}
.nav-item a {
}
.nav-item .active {
background-color: #ffc20e!important;
}
.nav-item:last-child {
margin-top: auto;
}
.active-nav{
background-color:#FFDB72;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: #000000;
text-decoration: none;
/*filter: grayscale(100%) opacity(0.7);*/
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: #FFDB72;
color: #000000;
}
.link-text {
display: none;
margin-left: 0rem;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
margin-right:50px;
}
.nav-link-arrow{
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.nav-link-icon{
width: 0rem;
min-width:0rem;
margin: 0 1.5rem;
}
.nav-link svg {
width: 1rem;
min-width: 1rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
font-size:16px;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Menu</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 2</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-user nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-picture-o nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 4</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-25">
<img src="images/image.png">
<span class="link-text">Nav 5</span>
</a>
</li>
</ul>
</nav>
Here i don't understand your question but here i understand a little bit what you want is nav active when clicked on one page, sorry if i misunderstood
Here I try my best to help and hope it helps
Here I added Jquery, you can try it
$(function(){
$('.navbar-nav a').on("click",function(){
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
})
.navbar {
position: fixed;
background-color: #C8E8E9;
transition: width 600ms ease;
overflow: hidden;
z-index:9;
border-radius:0px!important;
top: 0;
height: 100vh;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: max-content;
font-family: 'Open Sans';
}
.nav-item {
width: 100%;
}
.nav-item a {
}
.nav-item .active {
background-color: #ffc20e!important;
}
.nav-item:last-child {
margin-top: auto;
}
.active-nav{
background-color:#FFDB72;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: #000000;
text-decoration: none;
/*filter: grayscale(100%) opacity(0.7);*/
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: #FFDB72;
color: #000000;
}
.link-text {
display: none;
margin-left: 0rem;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
margin-right:50px;
}
.nav-link-arrow{
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.nav-link-icon{
width: 0rem;
min-width:0rem;
margin: 0 1.5rem;
}
.nav-link svg {
width: 1rem;
min-width: 1rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
font-size:16px;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Menu</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text ">Nav 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 2</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-user nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-picture-o nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 4</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-25">
<img src="images/image.png">
<span class="link-text">Nav 5</span>
</a>
</li>
</ul>
</nav>
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!
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>
I've made my nav and it works fine on desktop fully responsive, but when ever I try to emulate for mobile instead of pushing over the div elements it instead simply shrinks everything. you can see this in action
HTML (inserted via an include statement)
<header id="headers" class="nav-main "> <!-- animated fadeInDown-->
<div class="logo">
<img src="img/logo.png" alt="modren-day-thrones-logo"/>
</div>
<ul>
<li>
Home
</li>
<li>
Chairs
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>
Executive
</li>
<li>
Office
</li>
<li>
Lounge
</li>
</ul>
</div>
</div>
</li>
<li>
About Us
</li>
<?php
if(isset($_SESSION['logged_in'])){ ?>
<li>
Add
</li>
<li>
Log Out
</li>
<?php
}else{ ?>
<li>
Login
</li>
<?php
}
?>
</ul>
</header>
<div class="main-header-mobile-box">
<header class="mobile pushmenu-push">
<nav>
<div class="innerbutton">
<div class="catagoerys">
<!--<div id="cpBtn" class="nav-toggel">-->
<div class="menuebutton group">
<i class="fa fa-bars" id="nav_list"></i>
</div>
</header>
</div>
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<h3>Menu</h3>
<i class="fa fa-home"></i> Home
<i class="fa fa-folder-open"></i>Chairs
<i class="fa fa-folder"></i> Executive
<i class="fa fa-folder"></i> Office
<i class="fa fa-folder"></i> Lounge
<i class="fa fa-fw fa-list"></i> About Us
<i class="fa fa-sign-in"></i> Login
<?php
if(isset($_SESSION['logged_in'])){ ?>
<i class="fa fa-sign-out"></i> Log Out
<i class="fa fa-plus"></i>Add
<?php
}
?>
<hr>
</nav>
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
</section>
end html
body{
text-align:center;
font:1em "Open Sans", sans-serif;
width:70%;
min-width: 349px;
max-width: 1490px;
margin:0 auto;
overflow-x: hidden;
display: block;
}
.pushmenu { /*this is the nav*/
background: #3c3933;
font-family: Arial, Helvetics, sans-serif;
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
position:fixed;
}
.right-login-mobile-nav{
float: right;
display: inline-block;
}
.break-bar{
width:100%;
display: block;
}
.pushmenu h3 {
color: #cbbfad;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
margin: 0;
background: #282522;
height: 16px;
}
.buttonset{
display: none;
}
.pushmenu a {
display: block; /* drops the nav vertically*/
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #56544e;
border-bottom: 1px solid #312e2a;
padding: 14px;
}
.pushmenu a:hover {
background:#333;
}
.pushmenu a:active {
background: #454f5c;
color: #fff;
}
.pushmenu-left {
left: -240px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav_list {
background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
cursor: pointer;
height: 27px;
width: 33px;
text-indent: -99999em;
}
nav-list.active {
background-position: -33px top;
}
.buttonset {
background: #fff;
height: 16px;
padding: 10px 20px 20px;
}
Mobile specific effects
.mobilebtnmenue{
text-align: left;
margin-top: -22px;
margin-left: 35px;
}
.mobile{
position: relative;
z-index: 50;
background: #222;
font-family: 'Varela Round', sans-serif;
font-size: 17px;
display: block;
}
.pushmenu {
display: block;
}
header{
display:block;
height:100px;
}
body{
width:100%;
min-width: 375px;
}
apparently this code in the header fixes it?
however there seems to be a few hiccups here and there.
<meta name="viewport" content="width=device-width,initial-scale=1.0">