vertikale navigation mit gedrehtem text

Ich versuche zu erreichen, eine vertikale navigation im Menü die links und ich haben gedreht, der text links um 270 Grad mit css3. Ich habe gedreht, denn ich wollte den text von unten nach oben. Das problem ist, wenn ich einen padding-top es ist immer inkonsistente Abstände. Sie können sehen, mein code hier. Ich bin nicht in der Lage zu verstehen, die anderen Raum genommen wird. Ich auch versuchte, li Höhe aber es hat nicht funktioniert. Bitte, wenn mir jemand helfen könnte. Hier ist mein code:

HTML:

<div class="main-nav">
      <ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">METHODOLGY</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
 </div>

CSS:

.rotate{
    -webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);writing-mode:lr-tb}
html, body {
  min-height:100%;
  max-height:100%;
  height:100%;
  font-family:Oswald, sans-serif, Arial;
  font-size:14px;
  background:#fff
}
a {
  text-decoration:none
}
li {
  list-style:none
}
ul {
  padding:0;
  margin:0
}
.main-nav {
  width:45px;
  float:left;
  height:100%;
  position:fixed;
  background:#4c4c4c
}
ul.nav {
  width:21px;
  margin:0 auto
}
ul.nav li:first-child {
  padding-top:35px
}
ul.nav li {
  padding-top:124px
}
ul.nav li a {
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  writing-mode:lr-tb;
  float:left;
  width:21px;
  color:#fff
}

Ich würde drehen Sie den äußeren div statt, Sie können versuchen, diese demo - jsbin.com/ravuduni/2
Dies scheint perfekt und ich bin sehr dankbar, dass Sie mir geholfen haben. Ich möchte nur Fragen, ein paar Dinge, wie ich bin bewusst von Ihnen. was bedeutet diese Eigenschaft machen translateX(-100%) und was ist vh in der Breite: 100vh; Und Bitte machen Sie dies als Ihre Antwort, und ich werde es akzeptieren.

InformationsquelleAutor fahad.kazi | 2014-05-26

11

Rotierenden jede a element oder li element wird uns begegnen einige problem-Abstände, Positionierung der Elemente genau so, wie wir wollen. Wir bauen sollten die navigation im Menü, so dass es breitet sich horizontal aus, sieht erstmal OK dann haben wir einfach brauchen, drehen Sie den gesamten container in der navigation. Hier ist der aktualisierte code:
```
.main-nav {
  width:100vh;    
  height:45px;
  position:fixed;
  background:#4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav li {    
  margin-right:20px;
  float:right;
  height:100%;
  line-height:45px;
}
```
Menü haben soll eine Feste Höhe von 45px (nach gedreht werden, wird die Breite). Wir verwenden line-height:45px um die Mitte der a element vertikal (nach gedreht, es wird horizontal). Zunächst werden die .main-nav liegen horizontal wie diese:

wir brauchen, um es zu drehen -90deg (was ist gegen den Uhrzeigersinn) um den Punkt left - top angegeben transform-origin: left top. Nach gedreht, alle .main-nav wird aus der Ansicht wie diese:

Wir müssen also übersetzen Sie es nach unten ein Abstand von 100% of width jedoch beachten Sie, dass wir nicht verwenden translateY was zu bedeuten scheint, übersetzen Sie es senkrecht, denn nach gedreht, die X-Achse wird vertikale (nicht horizontal wie vor), also müssen wir translateX(-100%) (die positive Richtung nach oben, es ist nach vor gedreht). Dann haben wir:

Es ist nur ein einfaches Nutzungsrecht Fall im Zusammenhang zu transformieren in CSS3. Für die vh Einheit, es ist die Einheit relativ zum viewport Höhe. 100vh bedeutet 100% of viewport's height. Wir haben die Verwendung von 100vh für die width denn nach gedreht width wird height. Es sollten füllen Sie die volle Höhe des Viewports. Jedoch können Sie einige min-width für die width von px zur Begrenzung der width's minimum-Wert. Es ist, weil, wenn Sie die Fenstergröße ändern, die viewport-Höhe kann zu kleinen und daher die width wird entsprechend verkleinert werden. Beachten Sie auch, dass anstelle der Verwendung float:left für die li Elemente, die wir haben, zu verwenden float:right so, dass die Hause Menü zuerst angezeigt wird, von oben nach unten, sonst (mit float:left), die Hause - Menü erscheint am Ende (auf der Unterseite). Es ist ein wenig erweiterte Nutzung der transform hier (newbie) wir verwenden mehr als 1-Transformation für einen transform Eigenschaft, alle Transformationen sind durch ein Leerzeichen getrennt und die Reihenfolge der Transformationen wichtig ist. Wie rotate(-90deg) translateX(-100%) bedeutet drehen -90deg zuerst, dann die übersetzung auf der X-Achse -100%, während translateX(-100%) rotate(-90deg) ist es Umgekehrt, es ist eine völlig andere Sache und natürlich wird nicht funktionieren (macht ein unerwartetes Ergebnis).

Jsbin-Demo.

Vielen Dank für deine Hilfe und die Zeit, die Sie ausgegeben, um diese Dinge erklären, und das in einer sehr ausführlichen Art und Weise. Es gibt nur wenige wie Sie. Als Neuling habe ich viel von Euch gelernt und ich bin sicher, ich werde verbessern, durch die Zeit. Dank
Sie sind willkommen, für den downvote, das nächste mal einfach versuchen, buchen Sie Ihren code in die Frage Hinzugefügt, mit einigen demo-link. Downvoting, die in dieser site ist nur eine normale Sache, nur es hilft dem Fragesteller bitten, das nächste mal besser, es bedeutet nicht, dass Menschen zu Hass oder Abneigung gegen den Fragesteller, aber Frage s/, fragte er 🙂
Ja, ich denke, weil ich nicht poste meinen code bekam ich downvoted. Werde ich im Hinterkopf behalten. Vielen Dank 🙂
Vielen Dank für die Erwähnung der Bedeutung der Reihenfolge in der transform-Eigenschaft 🙂

InformationsquelleAutor King King
0

Diejenigen, die wollen mehrere Listen-Elemente zu bilden vertikale navigation hier ist link von tutorial erklären gründlich

Tutorial Link

InformationsquelleAutor Pravin Waychal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Jsbin-Demo.