Wie create left navbar mit Symbolen

Ich trainiere meine schlechten CSS-Fähigkeiten und ich kann nicht herausfinden, wie eine linke navbar erstellen (siehe Bild unten).Wie create left navbar mit Symbolen

Hinweis: Ich habe bereits eine Top-Navbar ... Und in der Mitte von beiden wird der Inhalt der Seite existieren.

<aside> 
    <div class="navbar navbar-fixed-left"> 
     <ul class="nav navbar-nav"> 
      <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;"> 
       <a href="#"> 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE 
       </a> 
      </li> 
      <li style="border-top: 1px solid #bdc3c7;"> 
       <a href="#"> 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE 
       </a> 
      </li> 
      <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;"> 
       <a href="#"> 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE 
       </a> 
      </li> 
     </ul> 
    </div> 
</aside>

Und mein css:

     .navbar-fixed-left { 
         width: 180px; 
         position: fixed; 
         border-radius: 0; 
         height: 100%; 
         background-color: #F0F0F0; 
         border-right: 1px solid #bdc3c7; 
        } 

        .navbar-fixed-left .navbar-nav > li { 
         float: none; 
         width: 178px; 
        } 

        .navbar-fixed-left + .container { 
         padding-left: 160px; 
        } 

        .navbar-fixed-left .navbar-nav > li > .dropdown-menu { 
         margin-top: -50px; 
         margin-left: 140px; 
        } 


        aside { 
         margin-top: 55px; 
        }

Quelle

2016-12-26 Cesar

Sie können CSS Flexbox versuchen. Machen Sie Ihr ul li a Element ein Flex-Container & wickeln Sie Ihren Text in einem Wrapper (in meinem Fall .text). Und gelten die folgenden Eigenschaften:

ul li a { 
    display: flex; 
    text-decoration: none; 
}

Werfen Sie einen Blick auf das Snippet unten:

body { 
 
    margin: 0; 
 
} 
 

 
.navbar-fixed-left { 
 
    width: 180px; 
 
    position: fixed; 
 
    border-radius: 0; 
 
    height: 100%; 
 
    background-color: #F0F0F0; 
 
    border-right: 1px solid #bdc3c7; 
 
} 
 

 
.navbar-fixed-left + .container { 
 
    padding-left: 160px; 
 
} 
 

 
.navbar-fixed-left .navbar-nav > li > .dropdown-menu { 
 
    margin-top: -50px; 
 
    margin-left: 140px; 
 
} 
 

 

 
aside { 
 
    margin-top: 55px; 
 
} 
 

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

 
ul li a { 
 
    display: flex; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background: #E0E1E6; 
 
} 
 

 
ul li a i { 
 
    padding: 10px; 
 
    border-right: 1px solid #bdc3c7; 
 
} 
 

 
ul li a .text { 
 
    padding: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<aside> 
 
    <div class="navbar navbar-fixed-left"> 
 
     <ul class="nav navbar-nav"> 
 
      <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;"> 
 
       <a href="#"> 
 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span> 
 
       </a> 
 
      </li> 
 
      <li style="border-top: 1px solid #bdc3c7;"> 
 
       <a href="#"> 
 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span> 
 
       </a> 
 
      </li> 
 
      <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;"> 
 
       <a href="#"> 
 
        <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</aside>

hoffe, das hilft!

Quelle

2016-12-26 15:55:59

Ihr Code nicht für mich arbeiten ... Überprüfen Sie das Bild: http://4.1m.yt/HxtJl- 6.jpg – Cesar

@Cesar Wie ist das möglich? Kannst du eine Geige dafür teilen? –

Versuchen Sie diesen folgenden Code,

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Menu</title> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" /> 
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> 
    </head> 
    <body class="no-skin"> 
      <div id="sidebar" class="sidebar responsive ace-save-state"> 
       <ul class="nav nav-list"> 
        <li class=""> 
         <a href="#" class="dropdown-toggle"> 
          <i class="menu-icon fa fa-list"></i> 
          <span class="menu-text"> Applications </span> 
          <b class="arrow fa fa-angle-down"></b> 
         </a> 
         <b class="arrow"></b> 
        </li> 
        <li class=""> 
         <a href="#" class="dropdown-toggle"> 
          <i class="menu-icon fa fa-list"></i> 
          <span class="menu-text"> Applications </span> 
          <b class="arrow fa fa-angle-down"></b> 
         </a> 
         <b class="arrow"></b> 
        </li> 
       </ul><!-- /.nav-list --> 
      </div> 
    </body> 
</html>

die zugehörigen CSS-Dateien zu erhalten, klicken Sie hier https://github.com/suthagar23/AdmissionSystem/tree/master/public

Quelle

2016-12-26 15:58:40

EDIT: Ich denke, das Problem Snippet wird die Ausgabe des Ansichtsfenster kleiner ist und isst einige Stile, müssen Sie um Werte durch @media Abfragen zu verbessern, wenn Sie die Reaktionsfähigkeit mit dem Code beibehalten möchten, den Sie zur Verfügung stellten:

Full resizable JSFiddle here (ein paar CSS wurden gegen den Ausschnitt unten geändert, um es auf größeren vi ok aussehen zu lassen ewport)

Big Ansichtsfenster:

Kleinere Ansichtsfenster:

Isolate Symbole aus Textmenü von Text auf <span> Verpackung. Machen li s relative und Symbole absolute und Werte wie gewünscht einstellen:

.navbar-fixed-left { 
 
    width: 180px; 
 
    position: fixed; 
 
    border-radius: 0; 
 
    height: 100%; 
 
    background-color: #F0F0F0; 
 
    border-right: 1px solid #bdc3c7; 
 
} 
 
ul.nav.navbar-nav { 
 
    margin-top: 0; 
 
} 
 
.navbar-fixed-left .navbar-nav li { 
 
    float: none; 
 
    width: 194px; 
 
    border-top: 1px solid #bdc3c7; 
 
    position: relative; 
 
    border-right: 1px solid lightgray; 
 
} 
 
li:nth-child(3) { 
 
    border-bottom: 1px solid #bdc3c7; 
 
} 
 
.navbar-fixed-left .navbar-nav li a:hover { 
 
    background-color: gainsboro; 
 
} 
 
.navbar-fixed-left + .container { 
 
    padding-left: 160px; 
 
} 
 
.navbar-fixed-left .navbar-nav > li > .dropdown-menu { 
 
    margin-top: -50px; 
 
    margin-left: 140px; 
 
} 
 
span { 
 
    margin-left: 60px; 
 
    color: gray; 
 
} 
 
aside { 
 
    margin-top: 55px; 
 
} 
 
i.fa { 
 
    border-right: 1px solid #bdc3c7; 
 
    padding: 10px 15px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    line-height: 20px; 
 
} 
 
.color1 { 
 
    border-left: 3px solid red; 
 
    margin-left: -1px; 
 
} 
 
.color2 { 
 
    border-left: 3px solid blue; 
 
    margin-left: -1px; 
 
} 
 
.color3 { 
 
    border-left: 3px solid green; 
 
    margin-left: -1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<aside> 
 
    <div class="navbar navbar-fixed-left"> 
 
    <ul class="nav navbar-nav"> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-plus color1" aria-hidden="true" style="color: grey;"></i><span>CREATE</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-plus color2" aria-hidden="true" style="color: grey;"></i><span>CREATE</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-plus color3" aria-hidden="true" style="color: grey;"></i><span>CREATE</span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</aside>

Quelle

2016-12-26 16:38:46 Syden

Ihr Code hat nicht für mich funktioniert. Überprüfen Sie das Bild: http://1.1m.yt/c2VIubF.jpg – Cesar

Cesar, ein wenig bearbeitet, Hoffnung hilft. – Syden

Wie create left navbar mit Symbolen

Antwort

Verwandte Themen