How to create Vertical text/link navigation menu
Step 1: First create a navigation class; and all positioning codes-
Step 2: Here we design the nav’s li elements; with CSS3 transform: rotate(-90deg); width; text positioning and <li> positioning.
Step 3: Now designing the ‘a link’ elements with font style, size, decoration and color.
Step 4: Then individual color and hover color setting up for <li> elements with rgba color codes; we creating 5 link slot so setting up their color respectively with l1, l2, l3, l4 and l5 <li> classes.
Step 5: It’s time to call ready CSS classes to HTML; So I’m using a <div> to call .nav you may call it under <nav> for integrating design to HTML5. Adding <ul>, <li> and <a> elements. And finally finishing the design.
Step 6: Place links in "#" and change anchor texts as you like. Change color code of <li> with your desired rgba color. And here are the full codes of this vertical text style navigation menu:
- This menu is compatible with all latest version of web browsers.