CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Illo Yonex Illo
Illo Yonex Illo

Reputation: 247

What's the easiest way to go about creating this horizontal menu nav bar?

See this pic: https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/890759/metro.jpg

I'm trying to practice my web coding skills by creating a menu bar like topmost one in the pic, with ability for the red indicator tab to slide on mousehover.

My idea is to use a inline-block div to layout the menu first, then use the "position:absolute / top:50% / transform:translateY(-50%)" technique to vertically center align the icons and text in each menu tab.

Where I feel is gonna be difficult is the indicator thing. How would one go about achieving that? Tks!

Upvotes: 1

Views: 43

Answers (3)

Duly Kinsky
Duly Kinsky

Reputation: 996

You could use nav-tabs in bootstrap relatively easy if you do not mind using bootstrap. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<title>repl.it</title>

<style>
	.big
	{
		height: 100px;
		width:100px;
		border-right: 1px solid light-grey;
	}
</style>
</head>
<body>
	
<ul class="nav nav-tabs">
  <li role="presentation" class="big text-center"><a class="big" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> <br>Home</a></li>
  <li role="presentation" class="big"><a class="big" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> <br>Profile</a></li>
  <li role="presentation" class="big"><a class="big" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> <br>Messages</a></li>
  <li role="presentation" class="big"><a class="big" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> <br>More</a></li>
  <li role="presentation" class="big"><a class="big" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> <br>Boom</a></li>
</ul>

</body>
</html>

Obviously you can customize it as much as you like.

Upvotes: 1

Andrew Axton
Andrew Axton

Reputation: 1030

Psuedo elements are definitely the way to go. It's also possible to do pure CSS triangles. https://jsbin.com/kubidacupi/edit?html,css,output

<ul>
  <li>Thing</li>
  <li class="active">Another</li>
</ul>

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  display: inline-block;
  padding: 40px;
  background: white;
}

.active:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  bottom: -4px;
  right: 0;
  border-top: 4px solid red;
  border-bottom: 4px solid red;
}

.active:after {
  content: '';
  position: absolute;
  top: 0px;
  left: calc(50% - 3px);
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid red;
}

Upvotes: 1

Wim Mertens
Wim Mertens

Reputation: 1790

You can do the indicator with css using :after

ul li a:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid red;
    content: " ";
    display: block;
    height: 0;
    margin-left: -4px;
    position: absolute;
    right: 50%;
    top: 0;
}

Upvotes: 1

Related Questions