Question

见图：https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/890759/metro.jpg

我试图通过在图片中创建一个最顶层的菜单栏来练习我的网络编码技巧，并且能够在鼠标悬停时滑动红色指示标签。

我的想法是先使用内联块div来布局菜单，然后使用＆＃34; position：absolute / top：50％/ transform：translateY（-50％）＆＃34;在每个菜单标签中垂直居中对齐图标和文字的技术。

我感到困难的是指标的事情。如何实现这一目标？ TKS！

Answer 1

您可以使用:after

使用css执行指标

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;
}

Answer 2

Psuedo元素绝对是最佳选择。它也可以做纯CSS三角形。 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;
}

Answer 3

如果你不介意使用bootstrap，你可以在bootstrap中使用nav-tabs相对容易。

＆＃13;

<!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>

＆＃13;

显然，您可以根据需要自定义它。

创建此水平菜单导航栏最简单的方法是什么？

3 个答案: