I was making a preview website and I noticed that the site wasn't displaying the menu in IE9.
I used Fullpage.js as a basic template and added on. I build the menu as suggested in the fullpage.js documentation:
<img class="menuknop" src="img/menuknop.png" alt="Menu button"/>
<ul class="menu">
<li data-menuanchor="Home" class="active"><a href=#Home>Home</a></li>
<li data-menuanchor="About"><a href=#About>About</a></li>
<li data-menuanchor="Concerts"><a href=#Concerts>Concerts</a></li>
<li data-menuanchor="Media"><a href=#Media>Media</a></li>
<li data-menuanchor="Contact"><a href=#Contact>Contact</a></li>
</ul>
and added the following css:
.menuknop{
position: fixed;
top: 1%;
left:1%;
width: 50px;
height: auto;
}
.menu{
position:fixed;
top:1.5%;
left: 80px;
height: 50px;
width: 100%;
padding: 0;
margin:0;
font-size: 1em;
overflow:hidden;
}
.menu li {
display:inline-block;
margin: 0px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
.menu li a{
text-decoration:none;
color: #000;
}
.menu li.active a:hover{
color: #000;
}
.menu li:hover{
background: rgba(255,255,255, 0.8);
}
.menu li a,
.menu li.active a{
padding: 9px 18px;
display:block;
}
.menu li.active a{
color: #fff;
}
The divs are being placed at the correct position but the content is not displaying in IE9.
I've been staring at this for hours and I'm really stuck. Any help would be greatly appreciated.
Here's a link to the test site.
It seems that you need to put z-index on ul.menu and img.menuknop as follows
ul.menu, .menuknop{z-index:99}
this I guess will resolve your issue.
Related
I'm pretty new to coding so please keep that in mind.
So I'm working on a little website, and I'm trying to stylise the header and nav bar. I'm trying to do some diagonal lines to seperate the different items in it, but I can't seem to make them appear.
I'd like to do something like this, with a simple drop shadow.
So here's my HTML and CSS
<nav>
<div class="logo"></div>
<ul>
<li>Home</li>
<li>Game</li>
<li>Infos</li>
<li>Contact</li>
<li><a class="active" href="#help">Help</a></li>
</ul>
</nav>
And
nav ul{
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav ul li a:hover{
color: #F16918;
text-shadow: 2px;
}
To be clear, everything in the image is already done and coded, except for the diagonal lines that I painted over in Photoshop.
My header switch to black when scrolling (white on top over the image), so that's why the text never says its black, but it is in the image.
So I was wondering if anyone could help me get those diagonal lines?
Thanks a lot!
Try this (using pseudo element)..adjust at your needs.
CSS
nav ul{
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
position: relative;
}
nav ul li:after {
position: absolute;
content:"";
width: 1px;
height:100%;
background: #000;
transform: rotate(-45deg);
top:0;
left:0;
}
nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav ul li a:hover{
color: #F16918;
text-shadow: 2px;
}
CSS WITH SHADOW
nav ul li:after {
position: absolute;
content:"";
width: 1px;
height:100%;
background: transparent;
transform: rotate(-45deg);
top:0;
left:0;
box-shadow: -4px 0 1px rgba(0,0,0,0.2);
}
HTML
<nav>
<div class="logo"></div>
<ul>
<li>Home</li>
<li>Game</li>
<li>Infos</li>
<li>Contact</li>
<li><a class="active" href="#help">Help</a></li>
</ul>
</nav>
DEMO HERE
I can't put the menu horizontally anything i would do. What i am doing wrong?
I suppose that the problem is from inline option, but i am not sure.
If anyone can correct my code i would appreciate very much. Thank you.
HTML code
<nav>
<ul>
<li class = "current-item"> Home </li>
<li> Profile </li>
<li> Contact </li>
</ul>
</nav>
CSS code
nav{
position:absolute;
margin-top: 288px;
margin-left: 0px;
width: 25px;
height:25px;
z-index: 2;
}
nav > ul > li {
font-size:20px;
color:white;
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
z-index: 2;
}
nav > ul > li> a {
text-decoration:none;
color:#000000;
transition:all linear 0.15s;
}
nav > ul >.current-item > a{
background-color:rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius:10px;
border:none;
cursor: pointer;
width: 50px;
height: 28px;
z-index:2;
text-decoration:none;
}
nav> ul > li:hover> a{
background-color:rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius:10px;
border:none;
cursor: pointer;
width: 50px;
height: 28px;
z-index:2;
}
Remove the width from nav.
nav{
position:absolute;
margin-top: 288px;
margin-left: 0px;
height:25px;
z-index: 2;
}
I have created a menu with a submenu which can be seen here: JSFIDDLE.
I created a triangle on top of my submenu but due to the fact that the submenu is shown when the menu item is hovered, undesired behaviour is shown.
If you want to click on one of the submenu's the submenu will be set to: display:none due to the fact that there is no hover detection anymore.
I think it is a quite simple fix and perhaps there is already a related question on this topic. but i would really appreciate any help.
*{
margin:0;
padding:0;
}
.menu nav{
text-align:center;
}
.menu nav ul{
list-style-type:none;
}
.menu nav ul li{
display:inline-block;
padding:80px 15px 0px 15px;
font-family: Titillium Web;
font-weight:700;
font-size:16px;
color:#00adef;
text-transform: uppercase;
}
.menu nav ul li a{
color:#00adef;
}
.menu nav ul li:hover{
border-bottom:4px solid #00adef;
}
.menu nav ul li .submenu{
display:none;
position: absolute;
background-color:#1A98C8;
margin-top:15px;
z-index:10;
opacity:0.9;
left:38%;
}
.menu nav ul li .submenu:before{
content: '';
position: absolute;
left: 75px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #1A98C8;
}
.menu nav ul li .submenu li{
color:#fff;
display:block;
padding-top:0px;
padding-left:0px;
height:40px;
border-bottom:1px solid #fff;
opacity:1;
line-height:40px;
width:150px;
}
.menu nav ul li:hover .submenu{
display:block;
}
<div class="menu">
<nav>
<ul class="default-menu">
<li>Home</li>
<li>about</li>
<li>
submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
<ul class="submenu">
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</div>
What you need to do here is basically add a delay for your .submenu to open so that when you navigate from your li to the .submenu, the .submenu is still open.
You can add that delay using the transition property as in:
.menu nav ul li .submenu {
transition: all .1s;
}
Since you would be using transition, you can't use the display property since it does not reflect a state change. Use a combination of visibility and opacity to achieve the hide and show behaviour of display.
Refer code:
* {
margin: 0;
padding: 0;
}
.menu nav {
text-align: center;
}
.menu nav ul {
list-style-type: none;
}
.menu nav ul li {
display: inline-block;
padding: 80px 15px 0px 15px;
font-family: Titillium Web;
font-weight: 700;
font-size: 16px;
color: #00adef;
text-transform: uppercase;
}
.menu nav ul li a {
color: #00adef;
}
.menu nav ul li:hover {
border-bottom: 4px solid #00adef;
}
.menu nav ul li .submenu {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #1A98C8;
margin-top: 15px;
z-index: 10;
opacity: 0.9;
left: 38%;
transition: all .1s;
}
.menu nav ul li .submenu:before {
content: '';
position: absolute;
left: 75px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #1A98C8;
}
.menu nav ul li .submenu li {
color: #fff;
display: block;
padding-top: 0px;
padding-left: 0px;
height: 40px;
border-bottom: 1px solid #fff;
opacity: 1;
line-height: 40px;
width: 150px;
}
.menu nav ul li:hover .submenu {
visibility: visible;
opacity: 1;
}
<div class="menu">
<nav>
<ul class="default-menu">
<li>Home</li>
<li>about</li>
<li>
submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
<ul class="submenu">
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</div>
Instead of using
display: none;
Try using
visibility:hidden
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
Found this on this question on stackoverflow. I think this could solve your issue of not being able to detect the :hover event (because 'display: none' removes the element)
I'm trying to create a basic drop-down menu. Whenever I however over "blog", the "wiki" link seems to get dragged into it.
Here's a screenshot to show what I mean:
As you can see, "wiki" is below "march". I want to have "march" drop down from "blog" and keep "wiki" along the green line.
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius: 15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
padding: 2px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here's a JSFiddle.
So I cleaned up the css and it seems to work now.
Here is your html below
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here is the new css below:
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius:15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
#header ul a
{
text-decoration:none;
font-weight:700;
line-height:32px;
padding:0 15px;
}
#header ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#header ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
padding:0
}
#header ul li:hover > ul
{
display:block
}
Be sure to compare to see the differences between your css and my css. If this is is not what you wanted please get back to me.
I'm trying to fix my drop down menu but I'm having problems with the highlighted colour and the background colour/size.
When I hover it, it is not covering the full button with orange like I want it to and, it has some grey left in it from the background where I don't want it to be.
One of the issues may be the fact I'm using 2 style sheets for mobile and computer.
HTML:
<div id="nav">
<ul id="menu">
<li id="active">Home</li>
<li>About Revelstoke</li>
<li>Ticker Rates</li>
<li>Snow School
<ul id="sub-menu">
<li>Kids Lessons</li>
<li>Adult Lessons</li>
<li>First Tracks</li>
</ul>
</li>
<li>Weather</li>
<li>Gallery</li>
<li>Trail Maps</li>
<li>Contact Us</li>
</ul>
</div><!--close nav-->
CSS (computer):
#nav {
background-color:#eee;
height: 33px;
border-top: solid black 2px;
border-bottom: solid black 2px;
min-width: 1000px;
}
#nav #active a {
font-weight: bold;
color: #ffffff;
background-color: #0160a2;
padding: 5px 15px 8px 15px;
}
#nav ul {
text-align: left;
font-size: 18px;
background-color: #eee;
}
#nav ul li {
display: block;
position: relative;
float: left;
line-height: 24px;
}
#nav ul li a {
display:inline;
padding:5px 10px 8px 10px;
background-color: #eee;
}
#nav li ul {
display: none;
}
#nav li:hover ul {
display: block;
position: absolute;
margin-top: 6px;
padding: 0;
width: 97px;
height: 82px;
}
#nav li:hover li {
font-size: 14px;
}
#nav ul li a:hover {
background-color: #ff8a00;
color: #000000;
}
#nav ul li ul li a{
padding:5px;
}
#nav ul li ul li a:hover{
padding:5px;
width: 97px;
height: 82px;
}
CSS (mobile):
#nav {
background-color:#eee;
}
#nav ul {
text-align:center;
font-size: 18px;
}
#nav ul li {
list-style-type:none;
border-top: 3px solid white;
}
#nav ul li a {
color: #000000;
display:block;
padding:13px 0;
text-decoration:none;
font-weight: bold;
}
#nav ul li a:hover {
background-color: #0096ff;
font-weight: bold;
color: white;
}
#nav #active a {
background-color: #01385e;
font-weight: bold;
color: white;
}
If I understood your question this should be a solution http://jsfiddle.net/GcDGv/2/ (I worked only for non-mobile CSS), this is how I fixed it:
I removed all height properties from classes related to the sub-menu. They can be auto-calculated.
Change the width of li elements in sub-menu to 100%, so now they will use whole area.
Make links in sub-menu as block elements, so margin/paddings from top and bottom will work as you want. And removed width and height properties from last style ul li ul li a:hover