Was ist der einfachste Weg zum Erstellen dieser horizontalen Menü-Navigationsleiste?

Sehen Sie dieses Bild: https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/890759/metro.jpg Was ist der einfachste Weg zum Erstellen dieser horizontalen Menü-Navigationsleiste?

Ich versuche, meine Web-Programmierkenntnisse, indem Sie eine Menüleiste wie oberst man im Bild, mit der Fähigkeit, für die rote Anzeige Registerkarte gleitet auf MouseHover zu üben.

Meine Idee ist es, ein Inline-Block div zu verwenden, um das Menü zuerst anzuordnen, und dann die Technik "position: absolute/top: 50%/transform: translateY (-50%)" zu verwenden, um die Symbole vertikal und vertikal auszurichten Text in jedem Menü Tab.

Wo ich fühle, wird schwierig sein, ist die Anzeige Sache. Wie sollte man das erreichen? Tks!

Quelle

2016-07-22 Illo Yonex Illo

Sie können das Kennzeichen mit CSS tun :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; 
}

Quelle

2016-07-22 02:42:44

Psuedo Elemente zu gehen auf jeden Fall die Art und Weise verwenden. Es ist auch möglich, reine CSS-Dreiecke zu machen. 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; 
}

Quelle

2016-07-22 02:58:15

Sie nav-Tabs in Bootstrap relativ einfach verwenden können, wenn Sie nicht Bootstrap mit nichts dagegen.

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

Natürlich kann man es so viel anpassen, wie Sie möchten.

Quelle

2016-07-22 03:08:00

Was ist der einfachste Weg zum Erstellen dieser horizontalen Menü-Navigationsleiste?

Antwort

Verwandte Themen