Block User scroll when full screen menu is open - javascript

i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!

I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>

Related

Unable to display content behind navbar when fixed position

I have a simple react app which displays my navbar, but whenever i do its position fixed; it stays at top but the content does not hide behind.
My navbar:
class Nav extends Component {
render() {
return (
<div>
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerButton drawer={this.props.drawer} click={this.props.drawerClickHandler} />
</div>
<img className="Nav__Logo-A" src={Mylogo} alt=""/>
<div className="toolbar__logo">Akcosh</div>
<div className="spacer"></div>
<div className="toolbar_navigation-items">
<ul>
<li>Software</li>
<li>About</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
)
}
}
my css:
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
}
.toolbar__logo{
margin-left: 1rem;
}
.toolbar__navigation {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
}
.toolbar__logo a{
color: #282828;;
text-decoration: none;
font-size: 1.5rem;
}
.spacer{
flex: 1;
}
.toolbar_navigation-items ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li{
padding: 0 0.5rem;
}
.toolbar_navigation-items a{
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active{
color: aqua;
}
#media(max-width: 768px){
.toolbar_navigation-items{
display: none;
}
.toolbar{
height: 68px;
border-bottom: 1px solid #aca4a4;
background-color: #e5e3e30a;
}
.toolbar__logo a{
font-family: Roboto,Helvetica,sans-serif;
letter-spacing: 1.6px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.Nav__Logo-A{
animation-name: out;
position: absolute;
height: 210%;
width:100%;
left: -36%;
margin-top: 9px;
transition: .4s all;
}
.Nav__Logo-A:hover{
cursor: default;
transform: rotate(360deg);
left: -36%;
margin-top: 10px;
}
}
}
I have tried everything but nothing is working; i want my navbar fixed on top and content behind it, if i have some other component below the Nav component, i want its content/text to go behind nav because it is fixed at top
try to modify the z-index so it can stay on top
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:2; // or some bigger value
}
One thing you can try is setting the z indexes!
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:99;
}
And then after that, if your content is still displaying in front of the navbar, go into that items CSS class and add
.exampleClass {
z-index:-1;
}

Align divs in one line and stick to bottom

I have the following HTML/CSS/JS:
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product {
display: inline-block;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
I want to achieve, that the div 'product-details' is displayed in the same line as the image and both of them should take 50% of the place available.
Additionally, i want to stick the checkout div to the bottom of the whole div, it is actually not even shown.
As you see, I used display: inline-block for the product div, but it is not working, I don't know why.
So bascically i want to achieve: image on the left, details on the right.
There is a lot more CSS and HTML, for a better readability I removed them.
The whole body is position: fixed, because it should always take the full page.
This is a MVCE and should work in a jsfiddle or in codepen.
Can someone help me?
First, it looks like some of your selectors weren't even working. Second, you were applying inline-block to the parent, when it really should have been applied to the children.
Either way, I think flexbox is a better solution here. I also made the image shrink or expand to fill the available space.
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview {
float: right;
position: relative;
}
.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100;
margin-top: 15px;
overflow: auto;
}
.product {
display: flex;
}
.product>div {
width: 50%;
}
.product .prodcut-image {
margin-right: 20px;
}
.product img {
width: 100%;
height: auto;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left: 100px;
}
.taxes {
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Try this
function toggleClass() {
document.getElementById('shopping-cart-body').classList.toggle('open');
}
.cart-preview a:visited {
text-decoration: none;
color: inherit;
}
.cart-preview .header {
display: block;
font-weight: bold;
border: 1px solid #808080;
padding: 5px;
cursor: pointer;
background-color: #fff;
}
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body{
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .products-container{
position: relative;
height: 100%;
width: 100%;
margin-top: 15px;
overflow: auto;
}
.cart-preview .body .product{
display: inline-block;
width:100%;
}
.cart-preview .body .products-container > .product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container > .product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before{
content: ' \25CF';
font-size: 30px;
}
.prodcut-image{
display:inline-block;
}
.product-details{
display:inline-block;
vertical-align:top;
}
.cart-preview .body .checkout {
position: relative;
height: 100%;
width: 100%;
}
.cart-preview .body .checkout > button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 20px;
margin-bottom: 50px;
height: 20px;
width: 205px;
margin-left:100px;
}
.taxes{
position: absolute;
bottom: 150px;
left: 0;
}
.cart-total{
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes{
position: absolute;
bottom: 130px;
width: 100%;
}
.cart-total .value{
float: right;
}
.cart-total .label{
float: left;
}
.taxes .value{
float: right;
}
.taxes .label{
float: left;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="img.svg" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://fakeimg.pl/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
Although html structure should be updated and more refined.

Multiple div carousel functionality using HTML/CSS/jQuery

How to achieve the carousel of multiple divs after clicking on add button? For each loop will repeat the div for every click of Add button. After click, multiple divs to be placed side by side and when it is overflow we need to do the carousel functionality for it with arrow marks as next and prev. Any Ideas on how to solve this?
.small-header {
min-height: 124px;
background-position: center right;
text-align: center;
display: table;
width: 100%;
padding: 22px 20px 0;
background: #fff;
box-sizing: border-box;
}
.small-header .vertical-align {
display: table-cell;
vertical-align: middle;
}
.component-carousel {
width: 530px;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
}
.component-carousel:before {
left: 0;
}
.component-carousel:after, .component-carousel:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 1;
}
.component-carousel .outer-content {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.component-carousel .items {
position: relative;
height: 190px;
left: 145px;
}
.component-carousel .items .item {
top: 0;
left: -50px;
height: 190px;
box-sizing: border-box;
float: left;
margin: 0 20px 0 0;
position: relative;
display: table;
}
.your {
display: block;
height: 290px;
border: 2px solid #5e6a71;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 0 0 0;
width: 244px;
position: relative;
background: #fff;
}
.component-carousel .bullets {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
z-index: 3;
}
.component-carousel .bullets li {
transition: all .15s ease-out;
display: inline-block;
margin: 0 3px;
}
.your>p.card-number {
margin-top: 95px;
margin-bottom: 10px;
position: relative;
color: #5e6a71;
}
.your .infonumber {
display: block;
}
.your p.card-number:after {
content: "";
display: block;
width: 70%;
height: 1px;
background: #bec3c6;
margin: 0 auto;
margin-top: 7px;
}
.card-left:after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 95px;
background: #cecfd1;
right: -15px;
top: 0;
}
.card-detail-container {
display: block;
position: absolute;
width: 100%;
height: 80px;
left: 0;
top: 180px;
color: #5e6a71;
}
.card-left {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 18px;
}
.card-right {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 35px;
}
.card-detail-container p {
line-height: 14px !important;
}
.component-carousel.show-two .controls {
display: none;
}
.component-carousel .controls {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
}
.component-carousel .controls li.disabled {
opacity: .2;
cursor: pointer;
}
.component-carousel .controls li:first-child {
left: 0;
}
.component-carousel .controls li {
transition: all .15s ease-out;
position: absolute;
top: 0;
cursor: pointer;
background: url(/image/component/carousel/arrows.png) no-repeat center left;
height: 100%;
width: 19px;
}
.component-carousel .controls li:last-child {
right: 0;
background-position: center right;
}
.button {
border: 1px solid #a8a8a8;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
position: relative;
text-decoration: none;
white-space: normal;
cursor: pointer;
color: #292929;
}
.btn {
position: relative;
color: #4f4f4f;
left: 38%;
width: 25% !important;
max-width: 580px;
text-transform: capitalize;
}
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-horizontal" }))
{
if (Model.Details != null && Model.Details.Count() > 0)
{
<div class="small-header">
<div class="vertical-align">
<div class="component-carousel">
<div class="outer-content">
<div class="mask">
<ul class="items" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<li class="item">
#foreach (var item in Model)
{
<div class="your">
<p class="card-number">
<span class="infonumber">123456</span>
</p>
<div class="card-detail-container">
<div class="card-left">
<p class="card-shape-title">Circle</p>
<p class="card-barcode-title">24242</p>
</div>
<div class="card-right">
<p class="card-carat-title">222</p>
<p class="card-certificate-title"></p>
</div>
</div>
</div>
}
</li>
</ul>
</div>
</div>
<ul class="controls">
<li class="prev disabled"></li>
<li class="next"></li>
</ul>
</div>
</div>
</div>
}
<div class="btns">
<button type="submit" id="addinfo" class="btn button" value="Add">Add<span></span><span></span></button>
</div>
}

Transition doesnt work

I have a question about transition, i am trying to create a custom collapsible sidebar, using transition. What is meant to happen, is that the #nav appears as soon as the image is hovered over. But somehow this doesn't work, please help.
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover #nav{
width: 50%;
function giveAlert(){
alert("Your costum button works!");
}
/* Stylesheet voor Eric's meetcabine */
html, body{
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
#media screen and (max-width: 960px) and (max-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 1%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover #nav{
width: 50%;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table{
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
#media screen and (min-width: 960px) and (min-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0%;
font-size: 375%;
}
#nav{
background-color: grey;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
float: left;
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table{
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eric's meetcabine</title>
<link href="./favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
</div>
<div id="nav">
<ul id="navigation">
<li>Home</li>
<li>Meting</li>
<li>Help</li>
</ul>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer"><center>© Protonic</center></div>
</body>
</html>
P.S.
Sorry for my terrible language skills,
I am from the Netherlands.
This works, also I changed #nav{ top:0; } to #nav{ top:27px; } to avoide the problem where when the #nav section expands it will cover the #menu toggle and the "hover" effect won't work making quirky animation.
Also change this selector #menu:hover ~ #nav to this #menu:hover ~ #nav, #nav:hover so that the #nav section will stay expanded when you hover away from the #menu into the #nav section and won't transition back to it's original width.
JS Fiddle-updated
CSS:
#nav {
/* code */
top: 27px;
/* code */
}
#menu:hover ~ #nav, #nav:hover{
width: 50%;
}
HTML:
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
<div id="nav">
<ul id="navigation">
<li>Home
</li>
<li>Meting
</li>
<li>Help
</li>
</ul>
</div>
</div>
Full Code:
function giveAlert() {
alert("Your costum button works!");
}
/* Stylesheet voor Eric's meetcabine */
html,
body {
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
#media screen and (max-width: 960px) and (max-height: 600px) {
#header {
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu {
width: 25px;
height: 25px;
margin: 5px;
display: inline-block;
z-index: 10;
cursor: pointer;
}
#title {
color: rgba(0, 0, 0, 0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
display: inline-block;
}
#nav {
background-color: grey;
width: 1%;
height: 100%;
position: absolute;
top: 27px;
left: 0;
z-index: 1;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover ~ #nav,
#nav:hover {
width: 50%;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li {
display: inline;
}
li a {
background-color: grey;
color: rgba(0, 0, 0, 0.50);
display: block;
padding: 8px;
text-decoration: none;
/*To remove the blue onderlines*/
}
li a:hover {
background-color: #607d8b;
/*Blue-grey from matterialize*/
}
#section {
width: 100%;
height: 88%;
}
#buttons {
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist {
/*da*/
margin: 0;
padding: 0;
}
#buttoncontainer {
float: none;
margin: 0;
padding: 0;
}
#button {
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover {
background-color: red;
width: 20%;
margin: 10px;
}
#graph {
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table {
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
#media screen and (min-width: 960px) and (min-height: 600px) {
#header {
background: linear-gradient(white, gray);
height: 7.5%;
}
#title {
color: rgba(0, 0, 0, 0.50);
margin: 0%;
font-size: 375%;
}
#nav {
background-color: grey;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li {
float: left;
display: inline;
}
li a {
background-color: grey;
color: rgba(0, 0, 0, 0.50);
display: block;
padding: 8px;
text-decoration: none;
/*To remove the blue onderlines*/
}
li a:hover {
background-color: #607d8b;
/*Blue-grey from matterialize*/
}
#section {
width: 100%;
height: 88%;
}
#buttons {
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist {
/*da*/
margin: 0;
padding: 0;
}
#buttoncontainer {
float: none;
margin: 0;
padding: 0;
}
#button {
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover {
background-color: red;
width: 20%;
margin: 10px;
}
#graph {
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table {
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
<div id="nav">
<ul id="navigation">
<li>Home
</li>
<li>Meting
</li>
<li>Help
</li>
</ul>
</div>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a>
</li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a>
</li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a>
</li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer">
<center>© Protonic</center>
</div>
Check Below, this code is work transition
function giveAlert(){
alert("Your costum button works!");
}
/* Stylesheet voor Eric's meetcabine */
html, body{
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
#media screen and (max-width: 960px) and (max-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 100px;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#nav:hover{
width: 500px;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table{
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
#media screen and (min-width: 960px) and (min-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0%;
font-size: 375%;
}
#nav{
background-color: grey;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
float: left;
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table{
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eric's meetcabine</title>
<link href="./favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
</div>
<div id="nav">
<ul id="navigation">
<li>Home</li>
<li>Meting</li>
<li>Help</li>
</ul>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer"><center>© Protonic</center></div>
</body>
</html>

menu wont show or work

My menu on my page will not work, it is not at all visible. I set it up on a codepen which works fine but now when I have tried to implement it, it failed to work. Where is it?
Still new to coding but would appreciate help.
HTML:
<body>
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>home.</li>
</a>
<a href="#" class="menu-link">
<li>portfolio.</li>
</a>
<a href="#" class="menu-link">
<li>about.</li>
</a>
<a href="#" class="menu-link">
<li>contact.</li>
</a>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>
CSS:
html,body {
padding:0;
margin:0;
height:100%
}
body {
overflow:hidden
}
/*--Homepage*/
p.footertext {
position:absolute;
left:20px;
bottom:10px;
font-size:12px;
z-index:1
}
#media only screen and (max-width : 400px) {
p.footertext {
display:none
}
}
.hero1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgb(247,200,198);
}
div #hero1title h1{
color: white;
font-size: 90pt;
position: absolute;
width: 100%;
height: 100%;
top: 30%;
text-align: center;
}
/* Menu styling*/
%transition {
transition: 250ms all;
}
.menu-opener {
background: none;
cursor: pointer;
height: 4rem;
margin: 1rem;
position: absolute;
user-select: none;
width: 4rem;
}
.menu-opener-inner {
background: white;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
#extend %transition;
&::before, &::after {
background: white;
content: '';
display: block;
height: 8px;
width: 2.5rem;
#extend %transition;
}
&::before {
transform: translateY(-.75rem);
}
&::after {
transform: translateY(.25rem);
}
&.active {
background: transparent;
&::before {
transform: translateY(0rem) rotate(-45deg);
}
&::after {
transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
}
}
}
.menu {
background: rgb(152, 211, 189);
height: 100%;
position: absolute;
top: 0px;
user-select: none;
width: 0rem;
z-index: -1;
#extend %transition;
&.active {
width: 100%;
#extend %transition;
& .menu-link {
color: white;
}
}
}
.menu-inner {
display: block;
flex-direction: row;
height: 450px;
list-style-type: none;
margin-top: 15%;
padding: 0;
}
.menu-link {
color: transparent;
display: flex;
flex: 1 1 auto;
font-size: 70px;
font-family: 'Calibre-Semibold';
height: 25%;
text-align: center;
text-decoration: none;
li {
margin: auto;
}
}
I dropped it all into a fiddle, and I find the following things:
The z-index shouldn't be -1
It's there. But you need to highlight it to see it.
The text is styled horribly, so it doesn't look so great.
Your text color in menu-list is set to "transparent".
Your HREFs should be inside the "li" not outside.

Categories