This question already has answers here:
How to create Curved & Overlapping Menu Tabs in CSS
(2 answers)
Closed 7 years ago.
I'm trying to replicate this menu feel but I've some trouble making the trapezoid shape of the different tabs. I went through the source code and also in the dev tool I removed each css propriety one by one but still I'm not figuring it out. I also tried
I made a JSFiddle trying to replicate it (there is no trapezoid shape at the moment).
<nav>
<ul>
<li class=" active">NEWS</li>
<li>FORUM</li>
<li><span>TRUC</span></li>
<li><span>OTHERS</span></li>
</ul>
</nav>
nav{
background:white;
border-bottom: 2px solid #50bfff;
}
nav ul{
margin:0;
}
nav ul li{
display:inline-block;
}
nav a{
padding: 1rem;
color:#505050;
display:block;
text-decoration:none;
}
nav ul .active{
background:#50bfff;
}
I have found the Trapezoid shape in the Source.
It is a perspective transformation, have a look at this fiddle.
div{
width: 50px;
height: 50px;
background: lightblue;
border-radius: 5px;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
<body>
<div>
</div>
</body>
I hope this helped.
Here are some great instructions for shaping elements:
https://css-tricks.com/examples/ShapesOfCSS/
The one you're looking for looks like this:
#trapezoid
{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
Try this one:
ul > li > a:hover{
background:#50bfff;
transition: all .2s ease;
color: white;
}
ul > li > a{
text-align:center;
left: 0;
bottom: 0;
right: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 100px;
height: 120%;
z-index: -1;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
nav{
background:white;
border-bottom: 2px solid #50bfff;
}
nav ul{
margin:0;
}
nav ul li{
display:inline-block;
}
nav a{
padding: 1rem;
color:#505050;
display:block;
text-decoration:none;
}
<nav>
<ul>
<li class=" active">NEWS</li>
<li>FORUM</li>
<li><span>TRUC</span></li>
<li><span>OTHERS</span></li>
</ul>
</nav>
Related
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
I can't figure it out how to center float:left object vertically.
I imagine that I could set the position of this menu bar vertically (The height of Y-axis) I think that would be the answer
// html part
<div class="menu_simple">
<ul>
<li>One</li>
<li>Two</li>
</ul>
//css
.menu_simple ul {
float:left;
margin: 0;
padding: 0;
width:100px;
list-style-type: none;
box-shadow: 5px 8px 5px #888888;
}
.menu_simple ul li a {
border: 1px solid #0066cc;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #3b3b3b;
display:block;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #5FD367;
}
Fiddle example
First you set position: absolute for the menu div, then set top to 50% and the transform option to -50%.
Source: https://css-tricks.com/centering-css-complete-guide/
Hope this helps
Use the CSS position property.
Set the page hold, in your case the <body> to position: relative; and the part you wish to move, in your case; .menu_simple to the following:
.menu_simple {
position: absolute;
top: 50%;
left: 0;
}
Flexbox works nicely for this type of thing:
http://codepen.io/simply-simpy/pen/rVwXyz
menu_simple {
display:flex;
justify-content: flex-start;
align-items: center;
height: 500px;
border: 1px solid red;
}
Relatively new to CSS, so please bear with my inexperience. I'm trying to create a menu, and after much searching and comparison and reading and copying, I've mostly come up with the format I want. The problem is that I want my menu to be the width of its content, not full width, and the code below (adapted from various examples) yields a full width menu. I've played around with things, but can't seem to identify what makes it full width or not -- it may be that what I want requires a more substantial rewrite.
In case it helps, what I want is a horizontal menu with an outer rectangular border, with width determined by its contents, not automatically full width (or even, not automatically a specified width).
This is my first time posting a question here, so thanks in advance for your help and patience!
<style type="text/css">
*/#menu ul,#menu li,#menu a{
list-style:none;
margin:0;
padding:0;
border:0;
font-family: Arial}
#menu{
border:1px solid #000000;
border-radius:5px}
#menu ul{
background:#ffffff;
padding:5px 10px;
border-radius:5px}
#menu ul:before{
content:'';
display:block}
#menu ul:after{
content:'';
display:block;
clear:both}
#menu li{
float:left;
margin:0px 0px 0px 0px;
border:0px}
#menu li a{
border-radius:5px;
padding:5px 10px 5px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
border:0px;
font-size:15px}
</style>
<div id="menu">
<ul>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
</div>
ul are block level elements are so are 100% wide by default.
Make the ul display as inline-block and it will collapse to the width of it's contents.
Add text-align to the parent as required. Here I used center.
#menu ul,
#menu li,
#menu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-family: Arial
}
#menu {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
#menu ul {
display: inline-block;
background: lightblue;
padding: 5px 10px;
border-radius: 5px
}
#menu ul:before {
content: '';
display: block
}
#menu ul:after {
content: '';
display: block;
clear: both
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
border: 0px
}
#menu li a {
border-radius: 5px;
padding: 5px 10px 5px;
display: block;
text-decoration: none;
text-align: center;
color: #000000;
border: 0px;
font-size: 15px
}
<div id="menu">
<ul>
<li><span>Link1</span>
</li>
<li><span>Link2</span>
</li>
<li><span>Link3</span>
</li>
<li><span>Link4</span>
</li>
</ul>
</div>
I'm attempting to create a simple drop down menu for. What I have currently looks like the following: http://jsfiddle.net/Wt9UC/
Now, what I'm aiming to achieve is something more in the lines of what Fiverr has, see for reference.
To clarify, I'm attempting to get borders (top, left, right) around the menu item hovered and around the entire box of sub-items which appears on-hover. If I'm being unclear in my wording the following image might help.
I tried playing around with layers (e.g. bringing the sub-items to the front in hopes of the border line being covered) but it didn't work out very well.
My HTML:
<ul id="menu">
<li>Test
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
My CSS:
#menu a {
color: black;
}
#menu {
padding: 0;
margin: 0;
list-style-type: none;
height: 30px;
}
#menu li {
float: left;
}
#menu li a {
padding: 9px 20px;
display: block;
text-decoration: none;
font-size: 12px;
}
#menu a:hover {
color: #c5cbc9;
border-radius: 3px;
border-left: 1px solid;
border-top: 1px solid;
border-right: 1px solid;
}
/* Submenu */
#menu ul {
border-radius: 3px;
border: 1px solid;
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
}
#menu li:hover { /*had bg*/
position: relative;
}
#menu li:hover ul { /*had bg*/
left: 0px;
top: 30px;
padding: 0px;
}
#menu li:hover ul li a {
padding: 5px;
display: block;
width: 168px;
text-indent: 15px; /*had bg*/
}
#menu li:hover ul li a:hover {
text-decoration: underline;
}
Thanks for your time!
Here is a Complete tutorial for building a Mega Menu. Hope this helps.
http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129
Demo Link : http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html
Hover on "4 column"/ Thats your exact requirment/
u need to do the following:
Add a "border-bottom: 1px solid #FFF" to your "#menu li a {}" and then move your dropdown 1px up.
link to fiddle http://jsfiddle.net/cL2x7/
This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
I am trying to push the child div down 5px inside of the parent div. When I put margin-top:5px; on the inner div it pushes down both the inner div and the parent div from the div above the parent div, but does not push the inner div down from the parent div. How to I set it so that only the inner div is pushed down 5px from the parent div? I do not want the parent div to push down from the div above it. Thanks for any help.
html for Navigation:
<nav>
<div class="nav-container">
<div id="cat_14623_divs">
<ul id="nav_14623">
<li><a href="#" onclick="return false;">AKINA & RED LAKE</a</li>
<li>FRESH WILD CAUGHT FISH
<ul id="navsub_14623_2326">
<li>WALLEYE</li>
<li>PERCH</li>
<li>CRAPPIE</li>
<li>NORTHERN</li>
<li>WHITEFISH</li>
</ul></li>
<li>NEWS FROM THE FISHERY</li>
<li>CONTACT US</li>
<li class="last">FAQs</li>
</ul>
</div>
</div>
</nav>
CSS for Navigation:
nav{
position:relative;
width:960px;
background-color:#660000;
height:40px;
}
div.nav-container{
position:relative;
width:100%;
}
#cat_14623_divs{
margin-top:5px;
height:30px;
background-color:#520000;
width:960px;
}
#nav_14623{
list-style:none;
display:block;
padding:0;
width:80%;
margin:0 auto;
}
#nav_14623 li{
position:relative;
float:left;
padding: 0.5em 1.5em;
margin: 0px;
font-size:12px;
border-right:solid 2px #fff;
text-align:center;
}
#nav_14623 li.last{
border-right:none;
padding-right:5px;
}
#nav_14623 li a{
color:#FFF;
text-decoration:none;
}
#nav_14623 ul{
position: absolute;
left:0;
top: 100%;
display: none;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
list-style: none;
margin-left: 0px;
margin: 0;
padding: 5px;
width:200px;
z-index: 1000;
background: #660000;
border-left: 1px solid #336699;
border-right: 1px solid #336699;
border-bottom: 1px solid #336699;
border-top: none;
}
#nav_14623 ul li{
position: relative;
float: none;
border-right: none;
padding:0;
margin: 0;
}
#nav_14623 ul li a{
color: #fff;
font-size: 12px;
vertical-align: middle;
line-height:32px;
width: 100%;
height:35px;
display:block;
}
#nav_14623 ul li a:hover{
background: #520000;
width: 100%;
}
#nav_14623 li:hover > ul{
display: block;
}
#nav_14623:after {
content: ""; clear: both; display: block;
}
Here is the url in case you want to see the site:
http://redlakewalleye.designangler.com/
Instead of a margin-top on the child, you should use a padding-top to the parent.
UPDATED (as a reaction on your comment)
A margin needs something to bounce on. Since the parent div has nothing to bounce on, it will bounce on the element above it. Therefor you should use padding.
The issue is collapsing margins when margins touch - http://www.sitepoint.com/web-foundations/collapsing-margins/