I have a horizontal menu composed as an un-ordered list, each list item is a link and there are special expanding list items that are, well, expandable (they open up a new vertical style menu). I want to have the menu background transparent black, and with a white border along the bottom. I also want the expandable list items to have a bottom arrow sticking out. Unfortunately setting the outer triangle to be white and the inner triangle to transparent black shows the white triangle underneath. Is there any way of getting a truly transparent inner triangle such that the menu could be placed on a background image or texture?
http://jsfiddle.net/RMCtk/2/
HTML:
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="expand">Product
<ul>
<li>pro1</li>
<li>pro2</li>
<li>pro3</li>
</ul>
</li>
<li>lalalalalalala</li>
<li>Pickles</li>
<li>Contact</li>
</ul>
</nav>
</body>
CSS:
nav {
top:50px;
line-height:20px;
font-size:20px;
width:calc(6*150px);
height:auto;
box-sizing:border-box;
}
nav ul {
margin:0;padding:0;
list-style-type:none;
}
nav ul li {
border:1px solid blue;
border-right:none;border-top:none;border-left:none;
float:left;
width:150px;
background-color:white;
box-sizing:border-box;
}
nav ul li a {
display:block;
width:150px;
padding:5px 0;
text-align:center;
}
nav ul li:hover {
background:orange;
}
nav ul li ul {
display:none;
}
nav ul li:hover > ul {
display:block;
position:absolute;
left:-450px+900px; /*margin-left + width of #nav*/
top:30px;
width:150px;
}
a:link, a:visited {
color:black;
font-family:Arial;
text-decoration:none;
}
li.expand:before {
content:'';
position:absolute;
height:0;
width:0;
border-left:15px solid transparent; /* left arrow slant */
border-right:15px solid transparent; /* right arrow slant */
border-top:15px solid blue; /*bg color here*/
margin-left:60px; /*75-15*/
margin-top:29px;
}
li.expand:after {
content:'';
position:absolute;
height:0;
width:0;
border-left:14px solid transparent; /* left arrow slant */
border-right:14px solid transparent; /* right arrow slant */
border-top:14px solid rgba(0,0,0,0.5); /*bg color here*/
margin-left:60.5px;
}
li.expand:hover:after,li.expand:hover:before {
display:none;
}
As you can see in the example, the border is blue, the background should be TRANSPARENT, and NOT WHITE. White would match the background of jsfiddle content box giving the illusion of transparency, but not true transparency. If this cannot be done, can anyone suggest a 'proper' way I could do this?
The trick you have used to create the triangle is by manipulating the border widths. The arrow is a border - you can't set a border color on that (if i understand what you meant correctly).
Related
I'm fairly new to HTML/CSS, and am developing a very simple website with a white menu bar on the top (it looks better than it sounds). However, unfortunately the menu bar background is transparent - text seems to appear within the menu bar as I scroll down in the page. How do I make a white background non-transparent?
Without seeing your code, I will recommend a few things.
set background: white;
set opacity: 1.0;
That should do the trick. Please post your code if you are still having problems.
You can accomplish that by declaring background color as white.
Example:
<style>
#menu-id{
background-color: white;
}
</style>
<style>#menuid{background: rgba(255, 255, 255, 0.3);}</style>
<style>#menuid {
background: rgba(255, 255, 255, 0.3);
}
</style>
Use background color just like following example, change .box background color #fff to get the white color.
.box {
width:100%;
background:#eee; /*background:#fff; use here white background */
}
.box ul {
margin:0px;
padding:0px;
list-style:none;
}
.box ul li {
display:inline-block;
}
.box ul li a {
display:block;
padding:5px;
margin:1px;
text-decoration:none;
}
.box ul li a:hover {
background:#ddd;
}
<div class="box">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
I have a simple navigation Bar and some styling with CSS already.
The nav Bar will have a white border on along the top for the inner links.
For the two outer links I want there to be a border on the left for the left link and on the right for the right link and also curved corners but i don't know how to focus the CSS on just these two li's.
I tried to give the li an id of home but that didn't work
i'v also tried putting the curved corners code in the ul and the NavBar tags.
Here is wht I have tried
<div id="NavBar">
<ul>
<li id="Home"><strong>Home</strong></li>
<li><strong>About Us</strong></li>
<li><strong>Products</strong></li>
<li><strong>Policies</strong></li>
<li id="ContactUs"><strong>Contact Us</strong></li>
</ul>
And this is the CSS which i have tried to focus on the one li home.
#NavBar li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li Home {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
Thanks for any help
Created a JSFiddle: https://jsfiddle.net/b4ejndkz/
If you're going to use width:20% and specify a border width, you'll need box-sizing:border-box;, that way it'll take into account the border size when determining total width. Otherwise it'll split off into 2 lines like it is at the moment.
Then you can set a specific corner to apply a border radius on by doing: border-radius: 5px 0 0 0; (top left, top right, bottom right, bottom left).
You could do it with id selectors https://jsfiddle.net/b4ejndkz/2/... or instead use the CSS selectors :first-child and :last-child to select your first and last elements of your list:
#NavBar li {
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li:first-child {
border-radius: 5px 0 0 0;
}
#NavBar li:last-child {
border-radius: 0 5px 0 0;
}
https://jsfiddle.net/b4ejndkz/1/
Use :first-child and :last-child.
To access only the first or last element of your list, do something like this:
ul li:first-child {
Styles for first element
}
ul li:last-child {
Styles for last element
}
With that, you can apply the needed styles to the matching links.
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
what im trying to do is have a vertical list with a solid border on the left side, but with 1 or 2 px space between each li. I can't use margin-bottom because then the border would break. I'm ultimately trying to have a list with a solid color on it's left side(no spaces), and when i hover the individual li for it to actually go left, over the existing border.I'm not set about using borders, but i've tried to do it with a wrapper div and i just can't seem to get it right, so any suggestions are welcome :)Oh and the vertical list is gonna be changing in height, so just putting a div as a background without having the height to auto to the list element is a no go.Heres the working link http://jsfiddle.net/hDHDF/ and i have the following code
<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span>###</span></li>
<ul class="categories">
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
</ul>
<li class="maincategory"><span>###</span></li>
</ul>
</div>
and the corresponding css:
#menu{
position:absolute;
right:0px;
left:0px;
top:120px;
height:auto;
width:190px;
margin-top: 35px;
margin-left:67px;
}
.menu {
list-style-type:none;
padding-right:10px;
color:#6c6762;
}
.maincategory{
background-color:#ada397;
height:40px;
}
.openmaincategory{
height:40px;
background-color:#ada397;
}
.menu li a{
display:inline-block;
height:100%;
width:100%;
}
.menu li{
border-left:solid #6c6762 40px;
}
.menu li:hover{
border-left:solid #6c6762 20px;
padding-left:10px;
}
.menu span a{
color:#5b5856;
font-size:20px;
padding-left:4px;
padding-top:6px;
}
.menu a{
text-transform:none;
text-decoration:none;
color:#6c6762;
}
.subcategory {
background-color:#d7d1c9;
height:40px;
}
It sounds like you want to use padding rather than margin. I set up an example here based on your code.
Key parts are moving the subcategory class to the span from the li and adding the .last so you can play around with final spacing.
.categories li span{
background-color:#d7d1c9;
height:40px;
padding-top:2px;
}
.subcategory .last{
padding-bottom:2px;
}
Update with the padding for the anchor on the last li.
Have the border on the list itself, not on the list items.
I fixed it by adding the border to the list itself and making the hover effect margin-left:-20px.