Hello i'm trying to remove the left and right "margin" (i don't know if it's the right word) , so all menu buttons can fit inside the bar.
I want all the menu to fit so if in the future i want to add/edit buttons i can do it.
I'm learning HTML/CSS and i kinda understand but i don't know how to remove this.
i tried previewing with chrome dev tools but it didn't help
thanks for the help i really appreciate it !
here's my code :
HTML file (with js script for dropdown)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="header_test_2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>CFTC - TEMPLATE HEADER AND FOOTER</title>
</head>
<body>
<header>
<section class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Connaitre la CFTC
<ul class="nav-dropdown">
<li>Histoire</li>
<li>Valeurs</li>
<li>Identité</li>
</ul>
</li>
<li>
Syndicat CFTC-FPT 34
<ul class="nav-dropdown">
<li>Organisation</li>
<li>Accueil</li>
<li>Rôle et définition</li>
</ul>
</li>
<li>
Vie Professionnelle
<ul class="nav-dropdown">
<li>Formation</li>
<li>Statut</li>
<li>Carrière</li>
<li>Temps de Travail</li>
<li>Congés</li>
</ul>
</li>
<li>
Vie Pratique
<ul class="nav-dropdown">
<li>Action Logement</li>
<li>Pensions Alimentaires impayées</li>
<li>Prime d'activité</li>
<li>Apprentissage</li>
</ul>
</li>
<li>Activités</li>
<li>Actualités</li>
<li>Presse</li>
<li>
Adhésion
<ul class="nav-dropdown">
<li>Les + adhérents</li>
<li>Espace adhérents</li>
<li>Nous rejoindre</li>
</ul>
</li>
<li>
Coordonnées
<ul class="nav-dropdown">
<li>Syndicat CFTC-FPT 34</li>
<li>UD34</li>
<li>Fédération CFTC FPT</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
, </header>
</body>
<script type="text/javascript">
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
</script>
</html>
And my CSS File
#font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
}
.navigation {
height: 70px;
background: #262626;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 10px;
line-height: 70px;
background: #028893;
color: #fff;
text-decoration: none;
font-family: oswald;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #1D71B8;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
/* position: absolute; */
top: 0;
right: 0;
background: #262626;
/* height: 70px; */
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
That's were things are needed to be changed
change max-width
.nav-container {
max-width: 1200px;
margin: 0 auto;
}
Related
As i'm making my first website there's this white space in my page i'm trying to remove but i can't , i tried the position and few settings but it doesn't seem to work , i even edited few of my already wroten code.
Any help will be good.
Thanks
See here
The github project
I have 2 files 1 for html and 1 for css for now
Here's my html file
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Template_Header_Footer.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Header Last version (sans responsive)</title>
</head>
<body>
<header>
<picture>
<source srcset="images/Logo.png" media="(max-width: 640px)">
<source srcset="images/Logo.png" media="(max-width: 1500px)">
<img id="logo" src="images/Logo.png" style"width:40%;">
</picture>
<picture>
<source srcset="images/paysage.jpg" media="(max-width: 640px)">
<source srcset="images/paysage.jpg" media="(max-width: 1500px)">
<img id="paysage" src="images/paysage.jpg" style"width:40%;">
</picture>
<p>Syndicat CTFC 34</p>
<center>
<h1>Syndicat Constructif, Partenaire du Dialogue Social<h1>
</center>
<section class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Connaitre la CFTC
<ul class="nav-dropdown">
<li>Histoire</li>
<li>Valeurs</li>
<li>Identité</li>
</ul>
</li>
<li>
Syndicat CFTC-FPT 34
<ul class="nav-dropdown">
<li>Organisation</li>
<li>Accueil</li>
<li>Rôle et définition</li>
</ul>
</li>
<li>
Vie Professionnelle
<ul class="nav-dropdown">
<li>Formation</li>
<li>Statut</li>
<li>Carrière</li>
<li>Temps de Travail</li>
<li>Congés</li>
</ul>
</li>
<li>
Vie Pratique
<ul class="nav-dropdown">
<li>Action Logement</li>
<li>Pensions Alimentaires impayées</li>
<li>Prime d'activité</li>
<li>Apprentissage</li>
</ul>
</li>
<li>Activités</li>
<li>Actualités</li>
<li>Presse</li>
<li>
Adhésion
<ul class="nav-dropdown">
<li>Les + adhérents</li>
<li>Espace adhérents</li>
<li>Nous rejoindre</li>
</ul>
</li>
<li>
Coordonnées
<ul class="nav-dropdown">
<li>Syndicat CFTC-FPT 34</li>
<li>UD34</li>
<li>Fédération CFTC FPT</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
</header>
</body>
<script type="text/javascript">
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
</script>
</html>
And that's my CSS Files :
#font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
font-family: "lato";
src: url("fonts\Lato-Regular.ttf");
font-family: "playfairdisplay";
src: url("fonts\PlayfairDisplaySC-Regular.otf");
}
.navigation {
height: 70px;
background: #028893;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
}
nav {
float: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 10px;
line-height: 70px;
background: #028893;
color: #fff;
text-decoration: none;
font-family: oswald;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #1a6066;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
/* position: absolute; */
top: 0;
right: 0;
background: #262626;
/* height: 70px; */
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
/* Partie pour le logo et la photo et la phrase */
#logo {
float: left;
height: 350px;
width: 350px;
}
header p {
font-family: oswald;
font-size: 30px;
padding: 80px;
}
#paysage {
float: right;
height: 400px;
width: 1520px;
}
header h1 {
overflow: hidden;
border: 0px solid #01B2C0;
color: #FFFFFF;
background-color: #01B2C0;
font-size: 30px;
font-family: lato;
/* position: relative; */
bottom: 80px;
width: auto;
/* height: 33px; */
padding-top: 25px;
}
* {
margin: 0;
}
Seems that the height of logo is bigger than the banner height.Manage Logo Height.
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
Hello I found a nice navbar I'd like to use; but I don't know how to make it stick to the top ?
I tried to add position:fixed to .navigation but it is somehow messing things up. The logo is hidden in full screen and the menu can't be find in mobile view.
Here is the snippet url :
https://codepen.io/anon/pen/NYazoj
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
// Navigation Variables
$content-width: 1000px;
$breakpoint: 799px;
$nav-height: 70px;
$nav-background: #fff;
$nav-font-color: #0c71c3;
$link-hover-color: #2581DC;
$nav-hover-font-color: #fff;
// Outer navigation wrapper
.navigation {
height: $nav-height;
background: $nav-background;
}
article {
height:2000px;
}
// Logo and branding
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: $nav-height;
text-transform: uppercase;
font-size: 1.4em;
a,
a:visited {
color: $nav-font-color;
text-decoration: none;
}
}
// Container with no padding for navbar
.nav-container {
max-width: $content-width;
margin: 0 auto;
}
// Navigation
nav {
float: right;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
float: left;
position: relative;
a,
a:visited {
display: block;
padding: 0 20px;
line-height: $nav-height;
background: $nav-background;
color: $nav-font-color;
text-decoration: none;
&:hover {
background: $link-hover-color;
color: $nav-hover-font-color;
}
&:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
} // Dropdown list
ul li {
min-width: 190px;
a {
padding: 15px;
line-height: 20px;
}
}
}
}
}
// Dropdown list binds to JS toggle event
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
// Binds to JS Toggle
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}
#media only screen and (max-width: 798px) {
// Hamburger nav visible on mobile only
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: $breakpoint) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
// Page content
article {
max-width: $content-width;
margin: 0 auto;
padding: 10px;
}
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
<article>
<h2>Navigation</h2>
<p>Responsive Dropdown Navigation Bar.</p>
<p>Want to see how it's made? Read the tutorial!</p>
</article>
To make Header Stick to the top Of browsers following CSS will work:
.navigation {
height: $nav-height;
background: $nav-background;
position: fixed;
top:0;
right: 0;
left: 0;
}
here is JsFiddle For your reference
Here is my menu test page with all the css:
body {
margin: 0;
}
.z-depth-0 {
box-shadow: none !important
}
nav {
width: 100%;
height: 56px;
color: #fff;
line-height: 56px;
background-color: rgb(238, 110, 115);
}
.dark-blue {
background-color: darkblue;
}
nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {
float: right !important
}
#nav-mobile li {
display: inline-block;
margin: 0 1.5em 1.5em 1.5em;
}
#nav-mobile li a {
text-decoration: none;
color: white;
}
#nav-mobile li .dropdown-content {
display: none;
}
#nav-mobile li:hover .dropdown-content {
display: block;
}
#nav-mobile .dropdown-button .dropdown-content li a {
display: none;
}
#nav-mobile .dropdown-button:hover .dropdown-content li a {
display: block;
}
<nav class="dark-blue z-depth-0">
<div class="nav-wrapper container">
<ul id="nav-mobile" class="right">
<li><a class='dropdown-button' href='#'>Links</a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><a class='dropdown-button' href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</nav>
I want the first ul menu to be right aligned on the page and I want the dropdown menu to be displayed with items one under the other when user hovers over Links or User. Instead, the dropdown content gets displayed in line. Can anyone help me fix the menu?
Also I want Links and User to be displayed a little higher
You need to position your items as relative and absolute. Parent items get a position: relative; and children get a position: absolute;
Best of luck!
<!DOCTYPE html>
<html>
<head>
<title>Test Menu</title>
<style>
body {
margin: 0;
}
.z-depth-0{box-shadow:none !important}
nav {
width: 100%;
height: 56px;
color: #fff;
line-height: 56px;
background-color: rgb(238, 110, 115);
}
.dark-blue {
background-color: darkblue;
}
nav .nav-wrapper{
height: 100%;
position: relative;
top: 0;
}
.right {float: right!important}
#nav-mobile li {
display: inline-block;
margin: 0 1.5em 1.5em 1.5em;
}
#nav-mobile li a{
text-decoration: none;
color: white;
}
#nav-mobile li .dropdown-content{
display: none;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile .dropdown-button .dropdown-content li a {
display: none;}
#nav-mobile .dropdown-button:hover .dropdown-content li a {
display: block;
}
ul#userdrop {
/* right: 0; */
/*left: 0;*/
margin-left: -100px;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
background: #000000;
}
#nav-mobile li a {
text-decoration: none;
color: white;
position: relative;
}
.right {
float: right!important;
/* position: absolute; */
/* right: 0; */
margin-top: 0px;
}
</style>
</head>
<body>
<nav class="dark-blue z-depth-0">
<div class="nav-wrapper container">
<ul id="nav-mobile" class="right">
<li><a class='dropdown-button' href='#'>Links</a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><a class='dropdown-button' href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Ok to get the options to display top down you want to add
#quicklinkdrop li{
display:list-item;
}
#userdrop li{
display:list-item;
}
This should fix them being inline and put items on top of each other
I've been trying to figure this out, but I'm honestly lost. I'm making a sidebar that has three levels: a main menu, with two more submenus when you hover over the menu items(so it's main menu item > submenu item > another submenu). The thing is, I'm not very good with CSS animations, but I'm trying to learn. And was wondering if this could be done with it?
Here's my code so far. Initially, I started this out with JS, but stackoverflow told me it'd be easier to do it with CSS animation. And honestly, this looks way cleaner. Anyway, currently, it shows the icon titles beside it when you hover over a sidebar. But how exactly should I go about making the submenu appear when you hover over each menu item separately? Should I do it by having a whole new div appear on hover, or should I do it by expanding the existing one(this doesn't seem like it'd be a good idea)?
What's the correct way? And on which elements should I add CSS transitions to achieve that smooth slidein sidebar?
/* .subnav {
position: fixed;
background-color: red;
margin-top: 0;
top: 75px;
left: 75px;
height: 100vw;
}
my poor attempt at submenu */
.sidebar {
margin-top: 75px;
position: fixed;
width:75px;
height:100vw;
top:0;
left:0;
z-index:100;
background-color: #292a2c;
color: #000;
overflow: hidden;
transition: width .5s;
}
.sidebar:hover {
width: 160px;
}
.sidebar ul {
width:200px;
}
.sidebar a i {
font-size: 30px;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
.nav-item {
padding-left: 8px;
}
.nav-item:hover {
background-color: $primary-color;
}
span {
display: none;
font-size: 14px;
}
.sidebar:hover span {
display: initial;
}
<div class="sidebar">
<ul class="nav flex-column m-0">
<li class="nav-item py-2">
<a class="nav-link" href="#">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<span class="pl-1">
Item
</span>
</a>
<ul class="nav subnav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Overview
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
</li>
</ul>
</div>
Thank you!
I hope this will help you. Here is some modification in your previous code.
You can also check it on Jsfiddle
*
{
color: #fff;
}
/* .subnav {
position: fixed;
background-color: red;
margin-top: 0;
top: 75px;
left: 75px;
height: 100vw;
}
my poor attempt at submenu */
.sidebar {
margin-top: 75px;
position: fixed;
width:20px;
height:100vw;
top:0;
left:0;
z-index:100;
background-color: #292a2c;
color: #000;
overflow: hidden;
transition: width .5s;
}
.sidebar:hover {
width: 250px;
}
.sidebar ul {
width:200px;
}
.sidebar a i {
font-size: 30px;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
.nav-item {
padding-left: 8px;
}
.nav-item:hover {
background-color: $primary-color;
}
span {
display: none;
font-size: 14px;
}
.sidebar:hover span {
display: initial;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu, .submenu1 {
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
text-decoration: none;
padding: 10px;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
.submenu li:hover .submenu1 {
display: block;
max-height: 200px;
}
.submenu a
{
}
.submenu li
{
padding-left: 15px;
}
.submenu1 a
{
}
.submenu1 li
{
padding-left: 20px;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu,
.submenu1{
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<div class="sidebar">
<ul class="nav flex-column m-0">
<li class="nav-item py-2">
<a class="nav-link" href="#">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<span class="pl-1">Item</span>
</a>
<nav class="navigation">
<ul class="mainmenu">
<li><span class="sr-only"></span>Home</li>
<li>About
<ul class="submenu">
<li>Team</li>
<li>Contact Us
<ul class="submenu1">
<li>Phone</li>
<li>Email</li>
<li>Fax</li>
</ul>
</li>
</ul>
</li>
<li>Our Products</li>
</ul>
</nav> </li>
</ul>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi-Level Drop Down Menu with Pure CSS</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #2c3e50; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
</style>
</head>
<body>
<ul class="main-navigation">
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<div class="css-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* CSSScript Demo Page */
google_ad_slot = "3025259193";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46156385-1', 'cssscript.com');
ga('send', 'pageview');
</script>
</body>
</html>
Hope it helps you. Please check it out and let me know.
Just modified your css a bit. Check if this helps. jsfiddle
.subnav {
position: fixed;
background-color: red;
margin-top: 0;
top: 75px;
left: 75px;
height: 100vw;
opacity:0;
overflow:hidden;
}
.sidebar {
margin-top: 75px;
position: fixed;
width:75px;
height:100vw;
top:0;
left:0;
z-index:100;
background-color: #292a2c;
color: #000;
overflow: hidden;
transition: width .5s;
}
.sidebar:hover {
width: 160px;
}
.sidebar .subnav
{
transform:75px;
transition: transform .5s;
}
.sidebar:hover .subnav{
transform: translateX(85px)
}
.sidebar a i {
font-size: 30px;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
.nav-item {
padding-left: 8px;
}
.nav-item:hover {
background-color: $primary-color;
}
span {
display: none;
font-size: 14px;
}
.sidebar:hover span {
display: initial;
}
.nav-item:hover .subnav {
opacity: 1;
}