I am trying to add a top arrow when someone mouses over a drop down menu item.
The problem is if I add some margin to the dropdown box - so it gets distance from the top and can get the arrow - when you try to mouse over the dropdown thing it disappears. because there is empty space.
Here is what I am talking about:
http://jsfiddle.net/jFWGS/
The "problem" starts at line 13.
nav ul li ul{
position:absolute;
display:none;
width:220px;
padding-left:3px;
margin:0;
margin-top: 14px;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.439);
}
Changing it to padding, instead of margin works... but it breaks the shadow.
I'd use a hidden :after pseudo element in order to allow the drop down to work properly as is
nav ul li ul:after {
top: -15px;
content: "";
display: block;
left: 0;
position: absolute;
height:20px;
width: 100%;
}
jsFiddle
Check this out: http://jsfiddle.net/jFWGS/10/
I changed it to padding like you said but added the box shadow to another pseudo element instead. It seems like it might be fragile if you add more sub menu items but you should just be able to tweak the height to get it looking right.
nav ul li ul{
position:absolute;
display:none;
width:220px;
padding-left:3px;
margin:0;
padding-top: 14px;
}
nav ul li ul:before{
content: '';
position:absolute;
top:14; left:0;
width:100%;
height: 85%;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.439);
}
nav ul li ul:after{
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0px solid #fff;
top: 6px;
content: "";
display: block;
left: 4%;
position: absolute;
width: 0px;
z-index: 1;
}
Related
This question is based on a thread here on SO Here This works all fine, unless the 2nd level item is not on top. In the example given, the item with the 2nd level menu is the first item. if you move the item down one or two spots, the 2nd level opens at the top.
The CSS, looks good, I also thought maybe it had to do with the Bootstrap version in the one demo link in the thread
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
(Fiddle).
So to eliminate that issue, I moved it around in the sandbox, from Fiddle, and got the same issue, so it seems it is not with my code, or Bootstrap version. I am not attached to doing it this way, I am fully open to using something different, as long as I can have 2nd level menu, and open on hover on full size screens.
Thanks,
Dave
UPDATED
I just added
.dropdown-menu .sub-menu{
top: auto !important;
margin-top:-30px !important;
}
and it seems to work fine, please check if this is what you want.
Here is fiddle
You know how to do this using CSS?
In my navbar I would like to see a transparent triangle to the active link.
If I create a PNG image with a transparent triangle and use it like this:
background: rgba (0,0,0,0.4) url (triangle.png) no-repeat bottom center;
this does not work properly because under my triangle shows the transparent rgba color rgba(0,0,0,0.4) ...
I would like to do this to make a nice effect when scrolling the page. It is possibile?
Demo
You can use the :before and :after pseudo elements to achieve this effect.
<nav>
<ul>
<li class="active">homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
nav {
position: fixed;
background-color: rgba(0,0,0,.7);
display: block;
width: 100%;
padding: 10px 0;
color: white;
font-size: 1.5em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: auto;
padding: 0 20px;
position: relative;
}
nav li:before,
nav li:after {
content: '';
position: absolute;
bottom: -35px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,0,0,.7);
border-left-width: 0;
border-right-width: 0;
}
nav li:before {
right: 50%;
}
nav li:after {
left: 50%;
}
nav li.active:before {
border-right-width: 10px;
}
nav li.active:after {
border-left-width: 10px;
}
nav li:last-child:after { /* covers the bottom of the navigation bar all the way to the right */
right: -9999999px;
}
Another solution using links:
<nav>
<ul>
<li>homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
write css style for :active class
js. No jQuery and you even get the hover effect for free.
i think this will help you..
same concept but used differently for further reference refer here :
stackoverflow.com/questions/17327076/how-to-create-a-ul-with-a-triangle-for-the-active-row
Will post my solution. It's pretty complicated and though I don't know if there is other simpler way to make li>a nested elements be transparent for the background under ul. This solution uses :before/:after pseudo attributes.
I used this markup (how to avoid helper <i></i>?):
<header>
<ul class="clearfix">
<li><a class="active" href="">HOMEPAGE <i></i></a></li>
<li>CONTACT <i></i></li>
<li>GET OUT <i></i></li>
</ul>
</header>
and CSS:
header li a {
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: inline-block;
padding: 25px;
color: #FFF;
position: relative;
}
header li a:hover {
background: rgba(255, 255, 255, .2);
}
header li a i:after, header li a i:before {
content:'';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
display: none;
background: url(http://subtlepatterns.com/patterns/escheresque_ste.png);
background-attachment: fixed;
border-top: 15px solid rgba(0, 0, 0, .5);
}
header li a.active i:after, header li a.active i:before {
display: block;
}
header li a:hover i:after, header li a:hover i:before {
display: block;
border-top-color: rgba(255, 255, 255, .1);
}
header li a i:before {
margin-left: -15px;
border-right: 15px solid transparent;
}
header li a i:after {
border-left: 15px solid transparent;
}
Hopefully someone will get inspired one day.
Demo: http://jsfiddle.net/R9pKq/
<figure>
<div><div>
</figure>
css
figure{
width:400px;
height:320px;
background:skyblue url(http://img1.wikia.nocookie.net/__cb20140301204257/disney/images/4/49/Elsa-Anna.jpg);
border:4px solid rgba(0,0,0,.8);
margin:40px auto;
position:relative;
}
figure div{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:200px;
background:rgba(255,255,255,.1);
}
figure div:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-40px;
margin-left:-40px;
border-bottom:40px solid rgba(255,255,255,.1);
border-left:40px solid transparent;
border-right:40px solid transparent;
}
Demo
or if you want to apply it to a menu
<menu>
<li><a>Home</a></li>
<li><a>Work</a></li>
<li><a>Projects</a></li>
<li><a>Infos</a></li>
</menu>
css
menu{
margin-top:40px;
}
menu li{
float:left;
list-style:none;
position:relative;
}
menu li{
padding:20px; 40px;
}
menu li:hover:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-20px;
margin-left:-20px;
border-bottom:20px solid rgba(0,0,0,.8);
border-left:20px solid transparent;
border-right:20px solid transparent;
}
Demo with Hover
to use the active class jst change menu li:hover:before to menu li.active:before
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}
Including the "float: left" at the place labeled "here!!!" made the padding of the "a" element independent of the padding of the ancestor "ul" element. Also the space between the "a" elements disappeared, as shown in picture A (before including "float: left") and picture B (after).
Could someone explain why this happens for me?
#top-menu {
width: 470px;
height: 200px;
position: absolute;
right: 0;
border: solid;
}
#top-menu ul {
width: 400px;
float: left;
padding: 20px;
position: absolute;
right: 0;
bottom: 0;
border: solid;
}
#top-menu li {
display: inline;
position: relative;
}
#top-menu li a {
border: 1px solid transparent;
border-radius: 4px 4px 4px 4px;
color: #5A6770;
float: left; /* <----- HERE!!! -----*/
padding: 15px 20px;
position: relative;
text-decoration: none;
}
#top-menu li a:hover {
background-color: #ECEFF2;
border-color: #D1D6D9;
}
#top-menu li a:active {
background-color: #E4E7EB;
border-color: #BAC1C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) inset;
}
That's because the <a> element is inline element. And when you add it float:left it starts acting like block element.
You can only have margin and padding on inline elements which affects only the "line" .. i.e left and right. But you can't top and bottom because for example. Imagine that you have long paragraph, about 10 lines. And somewhere you have span or a - inline elements. There is no logic to give them top and bottom margin and padding, cause the all paragraph will brake, but you can add left and right.
Very good explanation you can find HERE.
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}