Im trying to make my first mobile first site and i'm having a slight problem with my onclick even when u click menu. When u click the menu icon and the drop down occurs the, the screen drops a bit showing only part of the header. How do u make it so , so that when u click menu the screen doesnt drop or scroll down a bit. you can see in my example i put up what i mean, any ideas, any help is much appreciated heres my demo link:
Demo: http://cssdeck.com/labs/jkxsecgl
here's my HTML markup:
<body>
<div id="container">
<div id="header">
<h1>This is the header</h1>
<div class="main-nav" id="nav">
☰ Menu
☰ Close
<nav>
<ul>
<li>home</li>
<li>bio</li>
<li>contact</li>
<li>gallery</li>
</ul>
</nav>
</div>
</div>
<div id="content"><h1>This is the content</h1></div>
<aside><h1>The side bar</h1></aside>
<footer><h1>The Footer</h1></footer>
<div id="content"><h1>This is the content</h1></div>
<aside><h1>The side bar</h1></aside>
<footer><h1>The Footer</h1></footer>
</div>
</body>
CSS:
*{margin: 0px; padding: 0px;}
h1 {padding: 10px;}
#container {
position: relative;
width: 100%;
max-width: 320px;
background: rgba(51,0,255,.2);
margin: 0 auto;
}
#nav {
padding-left: 10px;
}
#nav nav ul, .nav-close, .nav-open {
list-style: none;
text-decoration: none;
}
.nav-close {
display: none;
}
#nav nav ul a {
text-decoration: none;
}
.nav-open, .nav-close {
background: yellow;
padding: 10px;
border: 1px solid;
}
#nav:target .nav-open {
display: none;
}
#nav:target .nav-close {
display: inline-block;
}
#nav nav {
position: relative;
text-align: left;
}
#nav nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
max-width: 16em;
max-width: 16em;
background: #f6f6f6;
border-width: 0px;
border-style: dashed;
border-color: #aaa;
overflow: hidden;
-webkit-transition: max-height linear 0.5s;
-moz-transition: max-height linear 0.5s;
-ms-transition: max-height linear 0.5s;
-o-transition: max-height linear 0.5s;
transition: max-height linear 0.5s;
}
#nav nav ul li {
display: block;
background: orange;
border-bottom: 1px solid;
}
#nav nav ul li a {
padding: 0.3em 1.5em;
}
#nav:target nav ul {
max-height: 400px;
}
.nav-open {
display: inline-block;
}
#header {
width: 100%;
background: rgba(0,204,51,.7);
}
#content {
background: rgba(0,0,204,.6);
height: 300px;
}
aside {
background: rgba(153,0,0,0.9);
height: 300px;
}
footer {
width: 100%;
height: 150px;
background: rgba(102,255,255,1);
}
As Tom said...that is the default action of your anchor tags...Because there is a hash (#) in the href attribute, it is attempting to jump to that location. You need to use JavaScript to override the functionality of the anchor tag, or just live with the jumping. And yes...the example you gave jumps too. He is jumping to "#nav" when open is clicked and "#" when close is clicked...if you resize his screen so that you have to scroll, you will see it occur.
To go the JS route, you can use onclick in the tag itself and return false, or you can use jQuery and use preventDefault.
Outside of that, I don't know of a way to do it purely with CSS and prevent the "jumping."
I had a look after thinking about this an although I still believe JS to be a better solution, this might help: http://cssdeck.com/labs/ok437d8l i moved all your target tags to the #container. Which is the container element so the anchor point is at the top.
But it will jump to the top if your scroll away.
Related
My problem is when I scroll up, the text on the page goes through my navbar and it looks really unprofessional and I need to fix it. I want to make it so that my navigation bar is layered on top of my body / section text (body text includes navigation bar but section only includes text not on my nav bar),
I tried adding a background-color and that worked except when I used my dark / light mode switcher, I have css properties for dark mode and light mode but I can't use a background color otherwise when you switch, it will still show the background color for light mode (or whatever mode you were deigning for).
I also tried Z-Indexes since that is supposed to work but no, literally did nothing. Which was really weird. I wish I could elaborate more but that's all I can say, it just didn't work. Here is an example of what I did but I can't actually show you the exact code since I already deleted those Z-Indexes since they didn't work.
EXAMPLE NAV BAR CSS {
z-index: 100;
}
EXAMPLE SECTION / TEXT CSS {
z-index: -100;
}
Here's my navigation bar code:
<ul>
<div class="without-dark-ul">
<img class="logo" width="100px" src="\imgs\logo.png">
<h1 class="logo-side">[PRIVATE] Accounting</h1>
<h2 class="logo-side-slogan">The best, afforadable accounting.</h2>
<br>
<hr>
<h3 class="navbar-text">Navigation</h3>
<div class="navbar">
<li><a class="main-nav" href="#">Home</a></li>
<li>Pricing</li>
<li>Contact</li>
</div>
<div class="vl"></div>
<h3 class="dark-mode-text">Dark / Light Mode</h3>
</div>
<div class="ul-dark">
<li class="li-dark">
<span>Dark</span>
<span>Light</span>
</li>
</div>
</ul>
And here's my CSS for my navbar (and I've got some in navbar CSS and some in dark mode CSS, I honestly don't know why I did it like that though.)
/* START NAVBAR */
.logo-side {
margin-left: 140px;
margin-top: -95px;
font-size: 40px
font-
}
.logo-side-slogan {
margin-left: 140px;
margin-top: -30px;
}
.logo {
margin-top: 20px;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
/* position: -webkit-sticky; Safari */
/* position: sticky; */
top: 0;
width: 100%;
z-index: 100;
}
ul > hr {
margin-left: 10px;
margin-right: 10px;
margin-top: -10px;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: inherit;
}
li a:hover {
background-color: rgb(105, 103, 103);
}
.main-nav {
background-color: #383838;
color: white;
}
.navbar {
margin-left: 20px;
margin-top: 30px;
padding-bottom: 70px;
}
.navbar-text {
margin-left: 20px;
margin-bottom: -20px;
}
.navigation-bar {
background-color: #262626;
position: absolute;
}
/* END NAVBAR */
/* START DARK MODE */ (This includes some nav bar CSS properties.)
.li-dark {
list-style: none;
width: 100%;
height: 60px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
}
.ul-dark.active li {
transform: translateY(-30px);
}
ul li span {
display: block;
height: 30px;
line-height: 30px;
width: 100%;
}
ul li span:nth-child(1) {
background: #262626;
color: #fff;
}
.ul-dark {
position: static;
top: 20px;
right: 20px;
margin-top: 25px;
margin-left: 320px;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
cursor: pointer;
overflow: hidden;
}
.dark-mode-text {
margin-left: 320px;
margin-top: -113px;
}
/* END DARK MODE */
I don't know if that is all you need but please ask me to send more code if you need more!
Thanks for your help.
Solninja A
give a position relative to body and your text parent
and z-index:10000;
I have have made a site which has a dropdown menu. The rest of the web page doesn't change when the dropdown menu is called for because I have given the page position:relative;.
And the dropdown has a higher z-index than the page so it is visible at all times. The only problem I have is that I also want to change the background-color of the dropdown-menu when someone hovers over it.
But unfortunantely, when I hover over the dropddown, the browser thinks that I am hovering over the page and for some reason doesn't understand that I am actually hovering over the dropdown-menu. Can anyone please help me with this.
#page {background-color;
height: 2500px;
width: 1600px;
margin: auto;
position: relative;
}
#dropdown {
margin: 0px;
}
.dropdownitem {
opacity: 0.7;
z-index: 1;
background-color: red;
}
.dropdownitem:hover {
background-color: aqua;
color: white
}
I think I have come to understand what the problem is. The thing is that I have a div with
position:absolute
And inside that div there are a number of list items. Because my parent div has absolute positioning, the element has been taken out of document flow and when I hover over the list items, the :hover pseudo class does not work on those nested list items. So now I have found the reason, but what only rests is the solution, and I haven't yet found that.
This may help
ul,
li {
padding: 0;
margin: 0;
}
li {
list-style: none;
padding: 1em;
}
#page {
margin: auto;
position: relative;
}
.mainmenu,
.submenu {
border: thin solid darkgray;
text-align: center;
}
.submenu {
display: none;
}
.mainmenu:hover>.submenu {
position: absolute;
top: 50px;
left: 0;
display: inline-block;
}
.mainmenu,
.dropdownitem {
width: 4em;
}
.dropdownitem {
opacity: 0.7;
background-color: red;
}
.dropdownitem:hover {
background-color: aqua;
color: white
}
<div id="page">
<nav>
<ul id="dropdown">
<li class="mainmenu">Main
<ul class="submenu">
<li class="dropdownitem">One</li>
<li class="dropdownitem">Two</li>
</ul>
</li>
</ul>
</nav>
</div>
I wanna get this:
The Target &
How it looks like
The thing is that my code goes like this:
HTML
<body>
<header>
<nav>
<h1>whiterose</h1>
<ul>
<li>home</li>
<li>us</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS:
header {
background: #5d5e62;
color: #ffffff;
font-size: 110%;
height: 7vh;
width: 100%;
opacity: 0.7;
position: fixed;
overflow: auto;
}
header h1 {
margin-left: 5%;
padding: 0.5% 0;
letter-spacing: -2px;
display: inline;
}
header nav {
display: inline;
overflow: auto;
}
header nav ul {
display: inline;
margin-left: 55%;
}
header nav ul li{
list-style-type: none;
color: #ffffff;
padding: 0 0.3%;
display: inline;
}
header nav ul li a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 200%;
}
So why even if I append the and elements to the parent element (header) they still have the opacity property applied?
You need to give the opacity to the header's background, and not to it's content:
header {
background: rgba(0,0,0,0.7);
}
Check the demo in the snippet:
div {
position: absolute;
top: 0px;
background: rgba(255,0,0,0.5);
width: 300px;
height: 150px;
font-size: 50px;
color: white;
}
<img src="http://lorempixel.com/400/200/" />
<div>Your Text Goes Here</div>
You will need to use the rgba value for the background-color property.
I've created a jsfiddle with this.
jsfiddle
You can play around with the opacity value to suit your needs
If you put opacity of parent element, it's child elements will automatically get the same opacity. If you try to be smart and define opacity of child element, believe me it won't work.
So, solution here is very simple. You want your header color to be #5d5e62 with opacity 0.7. Just convert this hex value in rgb and define background color as
background: rgba(93,94,98,0.7);
That way all child elements will have opacity 1 while background color will be of opacity 0.7.
I hope this would solve your problem.
I have created a horizontal menu that when you hover an item, a drop down menu appears. This is all fine. However, when you leave the menu item (to use the drop down) the drop down disappears. I understand that this is because you are no longer hovering it, but how do I solve this? Note: I don't want the drop down menu directly below it, I want a reasonable gap between the menu item and drop down (as I have it at the moment). Thanks.
HTML
<header id="header">
<div class="container">
<div id="logo"></div>
<nav class="header-menu">
ABOUT
<div class="about-dropdown">
CORE SERVICES
AT&L
HSEQ
CLIENTS
CONTACT
</div>
SERVICES
FACILITIES
CONTACT
</nav>
<div id="hamburger"></div>
<!--<div id="box-shadow-menu"></div>-->
</div>
</header>
CSS
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
user-select: none;
display: block;
transition: all 0.8s;
line-height: 100px;
z-index: 1000;
transform: translateX(0);
backface-visibility: hidden;
margin: 0;
}
header .container {
width: 1440px;
height: 100px;
border-bottom: 0.75px solid rgba(255,255,255,0.1);
}
#logo {
width: 55px;
height: 55px;
float: left;
margin-top: 27px;
background-image: url(../images/logo_white.png);
background-size: cover;
}
nav.header-menu {
float: right;
height: 96px;
vertical-align: middle;
padding-top: 1px;
}
.header-menu-item {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
margin-left: 20px;
text-decoration: none;
color: #ffffff;
line-height: 96px;
letter-spacing: 0.5px;
transition: 0.55s;
}
.toggle {
opacity: 0.3;
}
.current {
border-bottom: 2px solid #fff;
padding-bottom: 40px;
}
.about-dropdown {
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0 0 4px 3px rgba(0,0,0,0.1);
z-index: 3000;
margin-top: 35px;
margin-left: -35px;
border-radius: 3px;
display: none;
transition: 0.8s;
}
.about-dropdown a {
display: block;
text-decoration: none;
padding: 0px 28px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
margin: 0;
line-height: 50px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.header-menu-item:hover + .about-dropdown {
display: block;
}
On the 'a' tag, add a height or padding-bottom to it on hover. Your 'a' tag might need to be positioned absolute so that its height won't affect the height of your header.
Something like the below
.about-dropdown a:hover {
padding-bottom: 30px; /*height dependent on the gap you want to fill*/
position: absolute;
}
Unfortunately, I could not get your example to work. I did create a little demo of a CSS only solution to your problem.
It allows users to trigger the submenu by hovering the menu item. They can then keep the submenu visible by hovering it. When their cursor leaves the submenu, the submenu will be hidden after some specified delay, I chose 1 second in my demo. If users hover the submenu again within this delay, the submenu is not hidden. This allows users not only to move their cursor from the menu item to the submenu, but also makes it so that the submenu is not hidden immediately when users accidentally move their cursor to the left or right of the submenu.
.trigger {
box-sizing: border-box;
position: relative;
width: 120px;
margin: 0 0 50px;
padding: 10px;
background: #bada55;
text-align: center;
}
.sub {
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
width: 120px;
background: #4863a0;
color: #fff;
text-align: left;
/* hide element for now */
max-height: 0; overflow: hidden;
opacity: 0;
/* make submenu not hoverable when opacity transition finished,
* do this instantaneously */
transition: max-height 0s 1.5s,
/* hide the submenu after 1 second, in 400ms */
opacity .4s 1s;
/* prevent users from showing submenu when hovering hidden element */
pointer-events: none;
}
/* sub elements can be hovered */
.sub > * {
pointer-events: auto;
}
/* show submenu when trigger or menu itself is hovered */
.sub:hover,
.trigger:hover .sub {
max-height: 500px;
opacity: 1;
transition-delay: 0s;
}
/* give items some spacing */
.item:not(:last-child) {
padding: 10px 10px 5px;
}
.item:last-child {
padding: 10px;
}
<div class="trigger">HOVER ME
<div class="sub">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</div>
The idea is to (ab)use CSS transitions. We hide the submenu completely and set a transition that is delayed. Then, when hovered, we set the delay to zero. What this will do is show the submenu immediately, but hide it only after some delay. This sort of works, but now the submenu can be shown when users hover the hidden element. To prevent this, we make the submenu have no height (max-height: 0) and hide its sub elements (overflow: hidden). Browsers may now still decide to trigger the hover element, so we make sure they do not by also setting pointer-events: none. All of this should also be delayed, hence the transition on max-height. Finally, we make it so that the submenu can actually be hovered when it is shown by setting pointer-events: auto for the elements in it. Unfortunately, it is not possible to transition to max-height: none, so we specify some very large value, I used 500px in the demo.
I know that there are four different position values:
static
relative
fixed
absolute
What's really bothering me is the position of an element when i increase the marigin of it. Something like below.
HTML
<header>
<h1>Welcome to Online Shopping System <button type="submit" onclick = "location.href = 'adminlogin.php';" id = "button" >Admin</button></h1>
</header>
<nav id = "navigation">
<ul>
<li>Home</li>
<li>View</li>
<li>Login</li>
<li>Signup</li>
</ul>
</nav>
Notice the grey background color effect that I have applied in the hover.
It clearly shows I'm messing up somewhere with the positioning, and it would be a plus if you could enlighten on overflow property too.
CSS
header > h1
{
width: 100%;
background-color: brown;
height: 45px;
color: white;
text-indent: 65px;
font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
padding: 0;
margin: 0;
}
nav ul li
{
float:left;
list-style-type: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul > li > a
{
position: relative;
overflow: hidden;
color: white;
background-color: none;
display: block;
line-height: .1em;
padding: 0.5em 0.5em;
text-decoration: none;
margin-left: 80%;
}
nav li > ul li a
{
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
#navigation
{
background-color: brown;
margin: 0;
overflow: hidden;
height: 45px;
}
nav li:hover
{
background-color: #666;
}
this is how i got it, I Think, how You wanted?
Remove margin-left: 80%,
Add these into your CSS
nav ul {
display: flex;
justify-content: center;
width: 100%;
padding: 0px;
}
nav ul li {
width: 25%;
padding: 5px;
}
Does this helped?
this might help u a bit, sorry about my english.
Overflow:
hidden: hides everything what is not inside the area, no scrollbars.
overlay: shows scrollbars if needed and overlays scrollbars top of contents
scroll: show scrollbars normally
visible: shows all the child elements of current content, no area limitations.
Also you can set just overflow-x: hidden to prevent horizontal scrollbar for example and overflow-y: overlay to put scrollbar top of content.
Position:
fixed: dependable window area, stays exactly where u point it
relative: all child elements dependable to relative area
absolute: dependable to a first upper relative area, scrolls with contents
static: normal state
Examples:
<div style='position: relative; width: 100px; height: 20px;'>
<!-- THIS GOES TO TOP OF WINDOW LEFT CORNER AND STAYS THERE -->
<div style='position: fixed; top: 0px; left: 0px;'></div>
<!-- THIS GOES TOP OF UPPER RELATIVE CONTENT RIGHT TOP CORNER -->
<div style='position: absolute; top: 0px; right: 0px;'></div>
</div>
<div style='position: relative; overflow: hidden'>
<!-- THIS DIV YOU JUST NOT BASICALLY SEE, BECOUSE OF OVERFLOW HIDDEN -->
<div style='position: fixed; right: 0px; bottom: 0px;'></div>
</div>
I hope this helps You to understand it little better :)