when hovering over a menu item i am doing an animated underline by creating a pseudo class. but the underline is left to right and I wanted to make the stripe appear from the middle. I don't understand why margin: 0 auto didn't work. If it need, I worked with bootstrap 5 beta2.
<style>
.menu__list {
text-transform: uppercase;
justify-content: space-between;
/*margin-bottom: 36px;*/
}
.menu__item {
position: relative;
}
.menu__item a {
font-family: 'Open Sans', sans-serif;
color: #fff;
}
.menu__item:after {
content: '';
display: block;
margin: 0 auto;
height: 3px;
width: 0;
background: #9a9a9f;
margin: 0 auto;
margin-left: -20%;
position: absolute;
top: 55px;
}
.menu__item:hover:after {
width: 140%;
transition: all 0.5s ease;
}
</style>
<nav class="menu">
<ul class="menu__list d-flex">
<li class="menu__item">
<a href="#main">
Main
</a>
</li>
<li class="menu__item">
<a href="features">
Features
</a>
</li>
<li class="menu__item">
<a href="gallery">
Gallery
</a>
</li>
<li class="menu__item">
<a href="team">
Team
</a>
</li>
<li class="menu__item">
<a href="#">
Contacts
</a>
</li>
</ul>
</nav>
If you want the underline animation for your <a> tags to start from the middle instead of going from left to right. You can utilize the ::before or ::after pseudo elements to create a nice animation that starts from the middle and transitions outwards. Try this out.
.menu__list {
text-transform: uppercase;
/*margin-bottom: 36px;*/
}
ul li {
margin: .75rem auto;
}
.menu__item > a {
position: relative;
color: #000;
text-decoration: none;
}
.menu__item > a:hover {
color: #000;
}
.menu__item > a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.menu__item > a:hover::before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu">
<ul class="menu__list d-flex">
<li class="menu__item">
<a href="#main">
Main
</a>
</li>
<li class="menu__item">
<a href="features">
Features
</a>
</li>
<li class="menu__item">
<a href="gallery">
Gallery
</a>
</li>
<li class="menu__item">
<a href="team">
Team
</a>
</li>
<li class="menu__item">
<a href="#">
Contacts
</a>
</li>
</ul>
</nav>
I create menu with dropdown-submenu.
.dropdown-menu {
float:left;
}
.left-submenu {
float: none;
}
.left-submenu > .dropdown-menu {
border-radius: 6px 0px 6px 6px;
left: auto;
margin-left: 10px;
right: 98%;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
<li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">shorter things</a></li>
<li><a tabindex="-1" href="#">shorter things</a></li>
<li><a tabindex="-1" href="#">shorter things</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">More else</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
How to change side and direction arrow in dropdown-submenu "Try left"?
Demo here http://jsfiddle.net/5BUXu/20/
p.s. Want to get same result on picture
You just need to 'flip the script'. The arrow is in an :after in the bootstrap CSS, you need to rewrite that, flip all that makes it appear right, like this:
.dropdown-submenu>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
JSFiddle
So the float is now left instead of right, the border-right-width is now 5px instead of the border-left-width, and the margin-right is now margin-left.
For one item to have a left-arrow and one item to have a right arrow you either need to add a class or when you know the amount of items is fixed, you can work with nth-child selector. Like this:
With class added
<li class="dropdown-submenu right-submenu"> <a tabindex="-1" href="#">
.dropdown-submenu.right-submenu>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
With nth-child selector
.dropdown-submenu:nth-child(4)>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
I have coded a Bootstrap 3 dropdown menu in the static site proof. The client wants sub-menus and I have that working. I have made the menus in Wordpress but now the sub-menus are not working. Here is the html:
<!-- Main navbar ================================================== -->
<!-- <div class="row"> -->
<nav class="navbar navbar-default main-navbar" role="navigation">
<div class="container">
<div class="navbar-header main-nav">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- .navbar-header -->
<div id="navbar"class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Who We Are<span class="caret"></span>
<ul class="dropdown-menu">
<li>Our Story</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Our Team</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Staff</li>
<li>Board Members</li>
</li>
</ul>
</li>
<li>FAQ</li>
</ul>
</li>
<li class="dropdown">
Sports<span class="caret"></span>
<ul class="dropdown-menu">
<li>Olympic</li>
<li>Paralympic</li>
</ul>
</li>
<li class="dropdown">
Athletes and Coaches<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Athletes</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Current</li>
<li>Alumni</li>
<li>NEXTGEN</li>
<li>Up and Coming</li>
</li>
</ul>
</li>
<li>Coaches</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Training Groups</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Curling</li>
<li>Diving</li>
<li>Senior Women's Volleyball</li>
<li>Senior Women's Wheelchair Basketball</li>
<li>Wesmen Wrestling</li>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Partnerships<span class="caret"></span>
<ul class="dropdown-menu">
<li>Sport Canada</li>
<li>Own the Podium</li>
<li>Sport Manitoba</li>
<li>COPSIN</li>
<li>Coaching Association of Canada</li>
<li>National Coaching Institute</li>
<li>Corporate Community</li>
</ul>
</li>
<li class="dropdown">
Service Delivery<span class="caret"></span>
<ul class="dropdown-menu">
<li>IST</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Sport Science</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Sport Dietetics</li>
<li>Sport Psychology</li>
<li>Physiology</li>
<li>Strength and Conditioning</li>
</li>
</ul>
</li>
<li>Sport Medicine</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Life Services</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Game Plan</li>
</li>
</ul>
</li>
<li>Elegibility</li>
</ul>
</li>
<li class="dropdown">
What’s Happening<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Calendar of Events</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>External</li>
<li>CSCM</li>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">In The News</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Latest News</li>
<li>Press Releases</li>
<li>Archive</li>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Community Involvement</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>IMPACT Camps</li>
<li>Sports and Arts Program</li>
</li>
</ul>
</li>
<li>Event Sign-up & Registration</li>
</ul>
</li>
</ul>
</div><!--/.collapse navbar-collapse -->
</div><!-- container -->
</div>
</nav><!-- .navbar navbar-default main-nav -->
The CSS is:
#header {
z-index: 99999;
}
#navbar {
padding-left: 25px;
padding-right: 0px;
}
.navbar {
margin-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
font-family: $sans-serif;
font-size: 1em;
color:$text-color;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 23px;
border-radius: 0px;
}
.container-fluid {
margin-left: auto;
margin-right: auto;
}
.nav > li {
padding-left: 10px;
}
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-default {
border: none;
border-radius: 0px;
background: #d1d1d1;
}
.main-nav {
height: 40px;
background: #d1d1d1;
text-align: center;
border-radius: 0px;
}
.main-nav li a {
font-family: $sans-serif;
font-size: 1em;
color:$text-color;
padding-left: 15px;
padding-right: 15px;
}
.main-nav .nav {
float: none;
}
.main-nav .nav > li {
display: inline-block;
float: none;
/* margin: 0 5px;*/
vertical-align: middle;
}
/*.main-nav .nav li a {
color:$text-color;
width: 100%;
}*/
.main-nav .nav li a:hover {
color: #a31c27;
}
.main-nav .nav a {
width:100%;
height:auto;
vertical-align:middle;
display:inline-block;
}
.navbar-nav > li > .dropdown-menu {
background: #d1d1d1;
color: $reversed-color;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.dropdown-menu > li > a {
font-family: $sans-serif;
line-height: 2em;
}
.dropdown-submenu > li > a:focus,
.dropdown-submenu > li > a:hover {
color: #262626;
text-decoration: none;
background-color: #F5F5F5;
}
.dropdown-submenu {
position:relative;
padding-right: 15px;
}
.dropdown-submenu > .dropdown-menu {
top:0;left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
background-color: #d1d1d1;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
background: #d1d1d1;
}
.dropdown-submenu>a:after {
display:block;content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color: $text-color;
margin-top:5px;
margin-right:-12px;
}
.navbar-default .navbar-nav > li > a:hover {
color: $primaryColor;
background-color: $background;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: none;
}
.dropdown-backdrop {
position: static;
}
.dropdown-menu li:hover > .dropdown-menu {
visibility: visible;
display: block;
top: 0px;
left: 100%;
}
.dropdown-menu a:after {
display:block;content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color: $text-color;
margin-top:5px;
margin-right:-12px;
}
If someone can give me a hand that would be great.
Today I was trying to learn how to create those triangles with CSS Borders and I finally did. Awesome stuff! Although it seems that whenever I hover over the menu two things happen that I want to fix (1) the menu seems to snap and resize on hover and resize back on mouse out. (2) the hover opacity seems to flow down to the first item of the sub-menu. I've created a JSFiddle over here. If anyone can drop some knowledge on me, I'd be very grateful!
HTMLCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
<div class="navContainer">
<ul class="nav group">
<li>
<a class="active" href="#">Home</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Safari</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Prices</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Photos</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Contact</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
</ul>
</div>
<div class="box"></div>
</body>
</html>
CSS Code
html {
font-size: 62.5%;
}
body {
background: #fff;
font-size: 1.6em;
}
.navContainer {
width: 1100px;
margin: 0 auto;
}
ul.nav {
margin: 0;
padding: 0;
position: relative;
left:30%;
font-size: 1.3rem;
}
li {
float: left;
list-style-type:none;
text-align: center;
background: #aa2929;
}
li a {
display: block;
text-decoration: none;
color: #fff;
color: rgba(255,255,255, 0.7);
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
padding: 1rem 2rem;
transition: all .3s ease-in-out;
}
li a:focus,
li a:hover {
color: #fff;
background: #a85555;
background: rgba(255,255,255, 0.15);
}
ul.subNav {
margin: 0;
padding: 0;
}
ul.subNav li {
float: none;
display: none;
}
.nav li:hover ul.subNav li {
display: block;
}
.group:after {
content: "";
display: table;
clear: both;
}
li a.active:hover:after {
content: "";
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(89, 172, 255, 0.83);
}
It's because your "Sub-Items" are wider than your main nav elements, so when you hover and the Sub-Items are shown, the parent (main nav element) has to expand to fit it.
Putting a fixed width on .nav.group > li should solve your problem.
Another option is to absolute-position the dropdowns.
position absolute on your subNav and a fixed width on the parent list items ( .nav li) will fix the issue
.nav li{
width:80px; /* I used 80px as example */
}
.subNav{
position:absolute;
}
Add the above to the base of your css it will fix it.
Code Snippet...
html {
font-size: 62.5%;
}
body {
background: #fff;
font-size: 1.6em;
}
.navContainer {
width: 1100px;
margin: 0 auto;
}
ul.nav {
margin: 0;
padding: 0;
font-size: 1.3rem;
}
li {
float: left;
list-style-type: none;
text-align: center;
background: #aa2929;
}
li a {
display: block;
text-decoration: none;
color: #fff;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
padding: 1rem 2rem;
transition: all .3s ease-in-out;
}
li a:focus,
li a:hover {
color: #fff;
background: #a85555;
background: rgba(255, 255, 255, 0.15);
}
ul.subNav {
margin: 0;
padding: 0;
}
ul.subNav li {
float: none;
display: none;
}
.nav li:hover ul.subNav li {
display: block;
}
.group:after {
content: "";
display: table;
clear: both;
}
li a.active:hover:after {
content: "";
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(89, 172, 255, 0.83);
}
.nav li {
width: 80px;
}
.subNav {
position: absolute;
}
.nav > li > a {
height: 1.5em;
}
<body>
<div class="navContainer">
<ul class="nav group">
<li>
<a class="active" href="#">Home</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Safari</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Prices</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Photos</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Contact</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
</ul>
</div>
Hope this helps
I'm trying to style a select dropdown menu in order to overflow when arriving to 150px height. The problem is that when I apply the overflow: auto property, the after pseudoelement containing an arrow pointing to the select disappears.
Here we've the code:
.dropdown-menu{
background-color:#f2f2f1;
min-width: 100px;
border:none;
border-top:5px solid #b4b4b4;
border-radius:0;
>li>a{
font-size: 14px !important;
color:#818181 !important;
&:hover, &:active{
color:#003e59 !important;
}
}
.divider{
height:2px;
margin: 2px 0;
background-color:#cdcccd;
}
&:after {
bottom: 100%;
left: 25%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #b4b4b4;
border-width: 12px;
margin-left: -12px;
}
}
<div class="input-group">
<label>Jurisdiction</label>
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Jurisdiction <span class="spacer"></span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Jurisdiction 1</li>
<li class="divider"></li>
<li>Jurisdiction 2</li>
<li class="divider"></li>
<li>Jurisdiction 3</li>
</ul>
</div>