goldlife goldlife - 4 months ago 48
CSS Question

Twitter Bootstrap navbar hover effect - transition border expand from center

How can I make this transition start moving from the center of the element?

This is my CSS:

/* Navbar */
.navbar-fixed-top{
top: 80px;
}
.navbar-default{ /* assigning the top bar to the entire navbar div element */
background-color: #4F4F4F;
}
nav.navbar { box-shadow: 0 0 2px 0 #ccc; }
nav.navbar a { color: #FF7D36; }
nav.navbar ul.navbar-nav a { color: #FF7D36; border-style: solid; border-width: 0 0 2px 0; border-color: #000; }
nav.navbar ul.navbar-nav a:hover,
nav.navbar ul.navbar-nav a:visited,
nav.navbar ul.navbar-nav a:focus,
nav.navbar ul.navbar-nav a:active { background: #000; }
nav.navbar ul.navbar-nav a:hover
{
border-color: #FF7D36;
transition: border 0.5s ease-in-out;
}


The transition is working fine, but I want that the border expand from the center to left and right...
Thanks!


EDIT: The transition works now, but I use the twitter bootstrap
navbar... and when I use a small device and the links are now
vertically positioned, there is no padding-left in the a element,
because it is positioning absolute... hope you understand. (so I have
no distance between the left browser side and the a element)


See here my working example (when you resize the browser for mobile devices, you can see that there is no distance any longer)



/* Navbar */
.navbar-fixed-top{
top: 80px;
}
.navbar-default{ /* assigning the top bar to the entire navbar div element */
background-color: #4F4F4F;
}
nav.navbar {
box-shadow: 0 0 2px 0 #ccc;
}
nav.navbar a {
color: #FF7D36;
}
nav.navbar ul.navbar-nav a {
color: #FF7D36;
border-style: solid;
border-width: 0 0 2px 0;
border-color: #000;
}
nav.navbar ul.navbar-nav a:hover,
nav.navbar ul.navbar-nav a:visited,
nav.navbar ul.navbar-nav a:focus,
nav.navbar ul.navbar-nav a:active {
background: #000;
}

nav.navbar ul.navbar-nav a {
text-decoration: none;
position: relative;
display: inline-block;
}
nav.navbar ul.navbar-nav a::after {
content: '';
width: 100%;
position: absolute;
top: 100%;
left: 0;
height: 2px;
background-color: #FF7D36;
transform: scaleX(0);
transition: transform .35s ease;
}
nav.navbar ul.navbar-nav a:hover::after {
transform: scaleX(1);
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projekt-Titel</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Start</a></li>
<li><a href="#ueber">Über</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>




Answer

I want that the border expand from the center to left and right.

You can't transition a border like that.

I'd suggest a pseudo-element and a transitioned transform scale.

a {
  text-decoration: none;
  position: relative;
  display: inline-block;
}
a::after {
  content: '';
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: 2px;
  background: red;
  transform: scaleX(0);
  transition: transform .35s ease;
}
a:hover::after {
  transform: scaleX(1);
}
<a href="#1">SOME LINK</a>

Alternatively, you can transition the width but a transform (this time a translation) is still required to maintain the centering.

a {
  text-decoration: none;
  position: relative;
  display: inline-block;
}
a::after {
  content: '';
  width: 0%;
  position: absolute;
  top: 100%;
  left: 50%;
  height: 2px;
  background: red;
  transform: translateX(-50%);
  transition: width .5s ease;
}
a:hover::after {
  width: 100%;
}
<a href="#1">SOME LINK</a>

EDIT

I understand that when the navigation goes vertical at lower viewport widths the "border" might need to be slighly less wide.

This can be done by changing the width and adjusting the positioning...such as

nav.navbar ul.navbar-nav a::after {
    content: '';
    width: 80%;
    position: absolute;
    top: 100%;
    left: 10%; /* (100% - 80%) / 2 */
    height: 2px;
    background-color: #FF7D36;
    transform: scaleX(0);
    transition: transform .35s ease;
}

Codepen Demo

Comments