I have a strange menu to code and I have no idea how to do it, i have this 100% wide header strip, on the left side the logo sits and on the right the menu. The strip goes over fullscreen background. So, i need the active link to somehow crop the header strip, like make a hole. I attached an image so you can get a better idea. Thanks !
Here is the image:
http://oi49.tinypic.com/166zvo0.jpg
Use background opacity
HTML
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
CSS
body{
background:url(http://2.bp.blogspot.com/-C4Py3QDewmA/Td8HQzGhbcI/AAAAAAAAALU/BeVowacOJiA/s320/brick_wall.jpg) left top
}
li{
display:inline-block;
padding:10px;
border:1px solid black;
float:left;
background: rgba(255,255,255,0.60);
}
li:hover{
background:none
}
a{
color:white; font-weight:bold;
text-decoration:none
}
DEMO
Related
I using a mobile menu for my website which is dropping down from the top to the bottom. Is their a way to get it open from the left, like the sidebar does? I'm not that familiar with css animation and I tried transform: rotate(90deg); but without any effects.
The mobile menu is visible here https://www.amaoni.de
it can be easily done by using ul,li tags
ul,li{
list-style:none;
padding:0px;
margin:0px;
}
#yourMenu{
border:1px solid #000;
height:200px;
width:30%;
}
#yourMenu>li{
width:100%;
padding:5px;
background-color:blue;
box-sizing:border-box;
color:#fff;
}
#yourMenu>li:hover{
cursor:pointer;
background-color:red;
}
<ul id="yourMenu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
Without adjusting my padding for my 'nav ul li' because its used for spacing out navigation links, how can i fill the full width of the dropdown links background 'nav ul li ul li' as it only seems to fill half of the background color.
(HTML):
<nav>
<ul>
<li>Num 1</li>
<li>Num 2</li>
<li>Num 3</li>
<li>Num 4</li>
<li>Num 5</li>
<li>Num 6
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Num 7</li>
</ul>
</nav>
(css)
JSFIDDLE
Note: Choosing not to upload CSS as i have to use the Harvard referencing system and any similarities compared with online snippets returns as a higher plagiarism percentage even if this is my own work, so i'll choose to upload more precise code on JSFiddle as its not returned from the plagiarism test.
Here is a working demo
Change your padding from li to a:
nav ul li a {width:65px; display:inline-block; padding:0 30px}
and add the display and float proprieties to second-level li:
nav ul li ul li { padding:0; border:none;display: list-item;float: none }
well a quick way to fix this is instead of adding padding you just add the 30px on the right and left to the total width of the nav ul li which ends up being 125px
nav ul li {
border-right: 1px solid #355e7f;
display: inline-block;
float: left;
width: 125px;
}
Here is an updated JSFIDDLE
Hope that helps!
I'm having a bit of difficulty trying to get my drop down (sub-menu) to appear above the content. I have tried z-index and still there is no fix.
Initially the sub-menu starts off with a height of 0 and overflow-hidden (so it isnt shown). I have added JQuery to add a class of open when the parent of the sub menu is clicked. Then I have put a height on. The menu appears fine along with the transition, however the drop down sits below the content and it cannot be clicked.
Can anyone please help?
CSS
.sub-menu{
height:0;
overflow:hidden;
}
.sub-menu li {
width: 100%;
display: block;
clear: both;
border-top:1px solid;
}
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
z-index: 5000;
}
li.sub-menu-parent:hover .sub-menu {
height: 204px;
}
HTML
<div class="col navigation">
<nav>
<ul>
<li class="sub-menu-parent">Menu Item 1
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li class="sub-menu-parent">Menu Item 5
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>
</div>
You need to give your element some position before the z-index will kick into action. I'd suggest also adding this to your .navigation divider instead of the li elements:
div.navigation {
position: relative;
z-index: 5000;
}
You should then give a lower z-index to your content just to be on the safe side:
{contentSelector} {
position: relative;
z-index: 1;
}
z-index is not working without position you need to set a position for your element.
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
position:relative;
z-index: 5000;
}
Reference
You won't see the transition, without the position,
you need it relative to affect the div.
..and I did it in a nice little rhyme for you too :)
Have a look at this FIDDLE
Also, because Im in a good mood, I've tweaked into a sample horizontal menu
You need to use:
ul ul{
position:absolute;
}
Without position set to absolute, the content is effectively being injected before the next list item. You dont necessarily need to use z-index for a vertical menu.
I have a <ul> of items, who get bigger (with animation) on hover. Now i have made them be on the right side of the screen (using the CSS right:0em for the <li> class), and I have set the position of the <li> on hove to fixed so that only it will move left as it grows, and all the over objects in the will stay to the right. The problem is that as a result of that, when I hover over it, the next item gets "under" it. How can I change that? (maybe is there a way to control only the horizontal position property of the <li> on hover?)
Code:
http://jsfiddle.net/KBprd/2/
Without any code to start it is kind of hard to help. But based on what I could gather, you are wanting all the items to stay flush against the right side of the menu; only the "hovered" element is moved away from the right-side of the container. I've slapped together an example of how to do this. If this is not what you are looking for, provide some more code or detail in comments and we can go from there...
Here is the updated Fiddle
CSS:
.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
}
.navigation li.slide{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
float:right;
}
.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
}
.navigationClear {
clear:both;
height:1px;
margin-bottom:-1px;
}
HTML:
<ul class="navigation">
<li data-slide="1" class="slide">Slide 1</li>
<li class="navigationClear"></li>
<li data-slide="2" class="slide">Slide 2</li>
<li class="navigationClear"></li>
<li data-slide="3" class="slide">Slide 3</li>
<li class="navigationClear"></li>
<li data-slide="4" class="slide">Slide 4</li>
<li class="navigationClear"></li>
</ul>
The reason that your hovered element hides the element below is because you have given "position:fixed" to the hovered element. I fixed your problem by giving the ul element a width so that the li elements wont line up. I also removed the fixed position of the hovered element. and then right floated the li. This way you also dont need to put "clearNavigation" after each element.
Here's your fiddle code.
<ul class="navigation">
<li data-slide="1">Slide 1</li>
<li data-slide="2">Slide 2</li>
<li data-slide="3">Slide 3</li>
<li data-slide="4">Slide 4</li>
.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
width:53px;
}
.navigation li{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
position:relative;
right:0em;
float:right;
}
.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
right:0em;
}
Morning again...,
Sorry to bother everyone but I need more help... I haven't done any real coding in ages so here goes...
I'm trying to make a horizontal navigation menu, here's my html
<nav>
<ul id="navmenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<ul>
<nav>
now I have the following CSS
/* menu */
ul#navmenu{
border-top:1px solid #FFF;
background:#e60000;
list-style: none;
margin: 0;
padding: 0;
padding-left:30px;
}
ul#navmenu li{
display:inline;
}
ul#navmenu li a{
color:#fff;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
}
ul#navmenu li a.selected{
color:#e60000;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
background:#fff;
}
I want the links to sit in the center of the Li and look something like this:
However the containing UL doesn't seem to contain the LIs, they bleed out of the container. I've played around with overflow and line heights but nothing seems to work... here's a worst case scenario...
does any one have any ideas?
give display:block to your <a> because <a> in an inline element so, inline element not take vertical margin, vertical padding, width & height
Check this http://jsfiddle.net/T8eNe/2/
but first close your UL & NAV
For starters, I would close the <ul> and <nav> tags correctly, then check to make sure that the parent containers are floated left.
Give inline-block to your anchor
ul li a { display: inline-block; }