は、この写真を参照してください：https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/890759/metro.jpgこの水平メニューナビゲーションバーを作成する最も簡単な方法は何ですか？
私はmousehoverにスライドさせる赤色のインジケータタブのための能力と、PICの一番上のようなメニューバーを作成することによって、私のWebコーディングスキルを練習しようとしています。
私の考えは、インラインブロックdivを使用してメニューをレイアウトしてから、「position：absolute/top：50％/ transform：translateY（-50％）」のテクニックを使用して、各メニュータブのテキスト
私は難しいと感じるところは、指標の事です。それを達成するにはどうすればいいですか？ Tks！
あなたは: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;
}
を使用してCSSで表示を行うことができます擬要素は間違いなく行く方法です。純粋な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;
}
ブートストラップを使用して気にしない場合は、比較的簡単にブートストラップにNAV-タブを使用することができます。明らかに
<!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>
\t .big
\t {
\t \t height: 100px;
\t \t width:100px;
\t \t border-right: 1px solid light-grey;
\t }
</style>
</head>
<body>
\t
<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>あなたは同じくらい好きなようにカスタマイズすることができます。