PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Monday, November 7, 2022

[FIXED] How to ROTATE (NOT stack) HTML blocks in vertical order in CSS FlexBox in order of appearance?

 November 07, 2022     css, flexbox, html, menu, vertical-text     No comments   

Issue

Given a logical (search engine readable) HTML menu containing an unordered list menu wrapped inside a <nav>, starting with item Home and ending with item Blog. I have tried several things in pure CSS and HTML but cannot achieve what I want.

https://jsfiddle.net/6zt3gfp4/

What I would like, is this:

  1. Align the whole vertical menu to the top left edge of the screen, automatically.
    Regardless of the number of and/or length of the list items contained in the <nav>!!

  2. Expand the clickable area of each underlined link to its entire blue block.
    For ease of use when hovering and clicking a menu item.

  3. Ideally we should leave my broken start behind and opt for a FlexBox CSS design.
    Perhaps that gives us all better flexibility for achievng this. That would be a bonus!

enter image description here

nav {
  text-align:center;
  transform: rotate(-90deg) translateX(-240px) translateY(-100px);
  margin: 0;
  top: 0px;
  left: 0px;
  position: absolute;
}

nav li{
    display: inline-block;
    background-color: blue;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    margin: 5px auto;
    padding: 1em;
}

nav li a{
  color: #fff;
}

nav li a:hover{
  background: black;
}

nav li.selected {
  background-color: purple;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="selected"><a href="#">Philosophy</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>


Solution

Don't play a lot with transformation. Use writing-mode then move the style applied to li to a to make the link area bigger.

nav {
  top: 0px;
  left: 0px;
  position: absolute;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  background-color: blue;
  writing-mode: vertical-rl; /* */
  transform: scale(-1); /* */
  margin: 5px 0;
}
nav li a {
  color: #fff;
  padding: 1em;
  display: inline-block;
  line-height: 24px;
}
nav li a:hover {
  background: black;
}
nav li.selected {
  background-color: purple;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="selected"><a href="#">Philosophy</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>



Answered By - Temani Afif
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing