I want to build a hamburger menu and I don't know why when I add position absolute to my UL(links-list) his background doesn`t show.It only shows the links and the border-bottom. I will post maybe someone will spot the issue.
Thank you in advance.
I will write here something because I need to have more words to post the question.
.header {
width: 100%;
display: block;
height: 0;
z-index: 1;
.header-content {
display: block;
.logo {
display: none;
}
.links-list {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin: 0;
width: 100%;
background: #505050;
height: 0;
.close {
display: block;
& a {
padding: 0 .5rem;
}
}
& li {
border-bottom: 1px solid #404040;
}
}
}
}
.open {
height: auto !important;
}
#burger-menu {
display: block;
height: 40px;
width: 100%;
background: url(/Core/img/burger.png)no-repeat 98% center;
background-size: 70px;
background-color: red;
}
<header class="header ">
<div class="container">
<div class="header-content">
<a href="#" id="burger-menu">
</a>
<img src="/Core/img/logo1.jpg" class="logo" alt="logo" />
<ul class="links-list">
<li class="close"><i class="fas fa-times"></i></li>
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="overlay"></div>
</div>
</div>
</header>
It's because you have height: 0 on .links-list. When positioning elements absolutely, in most, if not all, cases you need to make sure the height has a positive value so the background has an area to draw on.
Related
const button = document.getElementById("hamburger");
const list = document.getElementById("list");
button.addEventListener("click", () => {
list.classList.toggle('show');
});
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
ul{
list-style-type: none;
}
.list{
list-style-type: none;
display: none;
}
.list.show{
position: fixed;
display: block;
inset: 0 0 0 0;
z-index: 99;
text-align: center;
background-color: hsl(0 0% 0% / 0.6);
padding: min(43vh, 20rem) 2rem;
}
header{
display: flex;
justify-content: space-between;
}
.hamburger{
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
position: absolute;
z-index: 999;
}
h1{
margin: 20rem 0;
}
.contents{
position: absolute;
left: 50%;
top: 120%;
transform: translate(-50%, -50%);
}
<header>
<div class="hamburger" id="hamburger"></div>
<ul class="list" id="list">
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>MENU</li>
</ul>
</header>
<div class="contents">
<h1 id="home">HOME</h1>
<h1 id="services">SERVICES</h1>
<h1 id="about">ABOUT</h1>
<h1 id="menu">MENU</h1>
</div>
I am trying to toggle off the eventlistener, when any of the navigation links are clicked. Once it scrolls to the link using the link reference in the html, I want the 'show' to toggle off, So its going to scroll to the link and toggle off the evebtlistener.
I've tried using the if else and some other html special class, Please can anyone help me solve this
Can you try adding a shared-class to the navigation items and then use document.querySelectorAll to add a click event listener to them? Something like -
<ul class="list" id="list">
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>MENU</li>
</ul>
And then -
const navItems = document.querySelectorAll('nav-item')
navItems.forEach((navItem) => {
navItem.addEventListener('click', () => {
list.classList.remove("show")
})
When "position: fixed" hits "class=LimitPoint", I want it to stop and not move.
But the "position: fixed" content goes past "LimitPoint" to "bottom" and then disappears..
Is it possible to make "position: fixed" stop on "LimitPoint" like in the attached image??
enter image description here
If you stop at the "LimitPoint" and then scroll up again, I want it to move with it.
Why doesn't it stop at "LimitPoint"?
Help..!
+) It is very convenient to use "position: sticky", but only 5 types of static, relative, absolute, fixed, inherit are available for the homepage to
which this code is applied. It is impossible to use "sticky", so I am inevitably trying to apply it with a script..TT
※I used a translator because I couldn't speak English. That is why my words may not be natural. Please understand.
$(window).scroll(function() {
if (window.pageYOffset > ($('.LimitPoint').offset().top - $('.fixedList').outerHeight())) {
$('.fixedBox').removeClass('fixed');
$('.fixedBox').addClass('Limit');
} else {
$('.fixedBox').removeClass('Limit');
$('.fixedBox').addClass('fixed');
}
});
ul,li {
margin: 0;
padding: 0;
list-style: none; }
#topArea {
min-height: 200vh;
background: #f4f4f4;
}
.fixedBox {
position: fixed;
width: 100%;
padding: 30px;
left: 0;
bottom: 0;
border: 0;
z-index: 88;
}
.fixedBox.fixed {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 88;
}
.fixedBox.Limit {
position: absolute;
left: 0;
bottom: 0;
z-index: 88;
}
.fixedBox .fixedList {
color: coral;
font-size: 30px;
font-weight: 600;
}
.LimitPoint {
width: 100%;
height: 1px;
background: red;
}
#bottomArea {
position: relative;
margin: 120px 0 0;
padding: 0 5%;
}
#bottomArea ul div {
position: relative;
display: flex;
flex-direction: row;
}
#bottomArea ul li {
padding: 7px;
}
#bottomArea ul li img {
width: 100%;
height: auto;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="fixedBox">
<ul class="fixedList">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div id="topArea"> </div>
<div class="LimitPoint"></div>
<div id="bottomArea">
<ul>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
</ul>
</div>
This can be done with pure CSS with no JS, .fixedBox element should be reordered for this, like so:
ul,li {
margin: 0;
padding: 0;
list-style: none; }
#topArea {
min-height: 200vh;
background: #f4f4f4;
}
.fixedBox {
position: sticky;
width: 100%;
padding: 30px;
left: 0;
bottom: 0;
border: 0;
z-index: 88;
}
.fixedBox .fixedList {
color: coral;
font-size: 30px;
font-weight: 600;
}
.LimitPoint {
width: 100%;
height: 1px;
background: red;
}
#bottomArea {
position: relative;
margin: 120px 0 0;
padding: 0 5%;
}
#bottomArea ul div {
position: relative;
display: flex;
flex-direction: row;
}
#bottomArea ul li {
padding: 7px;
}
#bottomArea ul li img {
width: 100%;
height: auto;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="topArea"> </div>
<div class="fixedBox">
<ul class="fixedList">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="LimitPoint"></div>
<div id="bottomArea">
<ul>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
</ul>
</div>
I would suggest applying position: sticky; on scroll. I ran into this problem just a few days ago:
How to make fixed scroll stick only till a certain section
Hope this helps :)
I have one page web app with 5 link's navigation and 5 sections. The structure is this:
<div class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Contact</li>
<li>P.S.</li>
</ul>
</div>
<div class="home-section">
<div class="home-section--greeting">
<p>Hi, I'm</p>
<p>T. Green</p>
</div>
</div>
<div class="about-section zoomOut">
</div>
<div class="skills-section zoomOut">
</div>
<div class="contact-section zoomOut">
</div>
<div class="ps-section zoomOut">
</div>
Every section is behind the home-section on page load. The sections are stacked on top of eachother with 100vh and position absolute. Also, every section EXCEPT the home-section has zoomOut class with transform: scale(0.8).
What I want to do is the following: when a link from the nav is clicked, I want the corresponding section to zoom-in and the active section to zoom-out, meaning the zoomOut class should be removed and the new section will slowly fade in (I will tackle the opacity and all animations, don't worry).
I want to do this in pure Javascript so, no jQuery/framework comments and pointers, please.
Also, I assembled a little jsfiddle so you could go to straight experimenting, if you may: https://jsfiddle.net/h7wturbf/1/
Thanks in advance!
Here is a plain javascript sample, using addEventListener, querySelector and querySelectorAll to catch and target links/sections
I added a zoomIn class to simplify how to toggle the sections
window.addEventListener('load', function() {
var links = document.querySelectorAll('.main-nav a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
var divtarget = e.target.href.split('#')[1];
document.querySelector('.zoomIn').classList.remove('zoomIn');
document.querySelector('.' + divtarget).classList.add('zoomIn');
})
}
})
html,
body {
height: 100%;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
.zoomOut {
transform: scale(0);
}
.zoomIn {
transform: scale(0.8);
}
.home-section {
height: 100vh;
background-color: yellow;
}
.home-section .home-section--greeting {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 62px;
color: #005168;
}
.about-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: dodgerblue;
}
.skills-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: rebeccapurple;
}
.contact-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: aqua;
}
.ps-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: forestgreen;
}
.main-nav {
position: fixed;
top: 50%;
transform: translate(0, -50%);
font-size: 21px;
left: 0px;
z-index: 999;
}
.main-nav ul li {
margin: 8px 0 8px 0;
list-style-type: none;
}
.main-nav ul li a {
text-decoration: none;
color: #4F96AA;
transition: color 0.2s ease-in;
}
.main-nav ul li a:hover {
color: #65AABD;
}
.main-nav ul li a.about:active ~ #about-section {
display: none;
}
<div class="main-nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Skills
</li>
<li>Contact
</li>
<li>P.S.
</li>
</ul>
</div>
<div class="home-section zoomOut zoomIn">
<div class="home-section--greeting">
<p>Hi, I'm</p>
<p>T. Green</p>
</div>
</div>
<div class="about-section zoomOut">
</div>
<div class="skills-section zoomOut">
</div>
<div class="contact-section zoomOut">
</div>
<div class="ps-section zoomOut">
</div>
You should first bind onclick Event handler to those elements that can be clicked. Once the element is clicked, you could remove the class using :
this.classList.remove('class-name');
I added a menu to my responsive website that pops up as soon as the viewport is 714px width or less.
When you click the button a menu slides out from the side across the page. The issue that I can't seem to solve is that I want the menu to be the height of the current viewport without allowing people to scroll down.
Here's a fiddly of what the menu looks like right now:
https://jsfiddle.net/baqcfjt1/1/
<div class="site-container-menu">
<div class="site-pusher">
<header class="header">
MENU
<nav class="menu">
Link 1
<strong>Link 2</strong>
Link 3
Link 4
</nav>
</header>
<div class="site-content">
<div class="container-menu">
<section id="header">
<div class="headerlogo"><img src="image" /></div>
<div class="headerlogosmall"><img src="image" /></div>
</section>
<section class="main">
-content-
</section>
</div>
</div>
<div class="site-cache" id="site-cache"></div>
</div>
</div>
CSS
.header {
z-index: -10;
position: absolute;
}
/* RESPONSIVE */
#media only screen and (max-width: 714px) {
.container-menu {
overflow: hidden;
*zoom: 1;
}
/* HEADER */
.header__logo {
font: inherit;
font-weight: 700;
padding: 0 25px;
float: left;
}
/* MENU */
.site-pusher,
.site-container-menu {
height: 100%;
}
.site-container-menu {
overflow: hidden;
}
.site-pusher {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.site-content {}
.header {
position: static;
height: 66px;
line-height: 62px;
color: rgba(228, 91, 65, 1.00);
background-color: #fff;
}
.header__icon {
position: relative;
display: block;
float: left;
padding-left: 3em;
font: inherit;
font-weight: 400;
font-size: 20px;
height: 66px;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: 16px;
left: 15px;
box-shadow: 0 10px 0 1px rgba(228, 91, 65, 1.00), 0 16px 0 1px rgba(228, 91, 65, 1.00), 0 22px 0 1px rgba(228, 91, 65, 1.00);
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
/* overflow-y: scroll;
-webkit-overflow-scrolling: touch;*/
width: 250px;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
overflow: hidden;
}
.menu a {
display: block;
padding-top: 2em;
padding-bottom: 2em;
color: #666666;
height: 25%;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.menu a:hover {
color: #e45b41;
}
.with--sidebar .site-pusher {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.with--sidebar .site-cache {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
}
$(document).ready(function() {
(function($) {
$('#header__icon').click(function(e) {
e.preventDefault();
$('body').toggleClass('with--sidebar');
});
$('#site-cache').click(function(e) {
$('body').removeClass('with--sidebar');
});
})(jQuery);
});
This can be achieved using viewport-percentage length units: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
One option would be to use the vh css unit and specify that the body has height:100vh
https://jsfiddle.net/r61n4y0v/
I added:
body{
height:100vh;
}
to the CSS file.
You should also check the vh unit's browser compatibility, before using it. You can check here:
http://caniuse.com/#feat=viewport-units
If you'd like to be more specific with the height:100vh; rule, you can remove the overflow:hidden from .site-container-menu and add height:100vh to .menu directly:
https://jsfiddle.net/6won6stx/
Your menu links have both a height defined height:25% and padding...this is not advised as it can lead to unexpected behaviour. It would be better to replace:
<nav class="menu">
Link 1
<strong>Link 2</strong>
Link 3
Link 4
</nav>
With:
<nav class="menu">
<ul>
<li>Link 1</li>
<li><strong>Link 2</strong></li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
and remove the height:25% from the a element and add height:25vh to the li elements.
https://jsfiddle.net/s5gbk7y1/
I've also made a few other changes such as changing the line-height property on the menu links to 25vh.
Take a look at the latest fiddle and let me know if it helps!
I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>
If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}
Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.
The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.