sagar kodte sagar kodte - 6 months ago 9
Javascript Question

how to keep text as it is while parent is fliped?

before hover this is before hover

after hover i want this is after hover

i want keep the text horizontal like this [menu] after rotating the li on hover. how to do with simple solution. I saw some examples but not understand it. jQuery is also ok for it. Please help, Thank you.



section#fourth{
margin:auto;
width: 550px;
}
section#fourth li {
padding: 8px 10px;
transition: all .5s;
background: brown;
display: block;
width: 30px;
margin-bottom: 3px;
}
section#fourth li a{
color: #fff;
font-weight: bold;

}

section#fourth li:hover{
border-bottom: 5px solid #000;
transform: rotate(90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<section id="fourth">
<h2>Example</h2>
<nav>
<ul class="list-inline">
<li><a href="#">M<br>e<br>n<br>u<br></a></li>
<li><a href="#">M<br>e<br>n<br>u<br></a></li>
<li><a href="#">M<br>e<br>n<br>u<br></a></li>
<li><a href="#">M<br>e<br>n<br>u<br></a></li>
<li><a href="#">M<br>e<br>n<br>u<br></a></li>
</ul>
</nav>
</section>




Answer

Use span tag for all alphabets, rotate span on hover of li via transform: rotate(90deg);.

Update HTML & CSS, i have remove <br> from li.

HTML

<section id="fourth">
    <h2>Example</h2>
    <nav>
        <ul class="list-inline">
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
      <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
            <li><a href="#"><span>M</span><span>e</span><span>n</span><span>u</span></a></li>
        </ul>
    </nav>
</section>

Updated CSS

section#fourth{
    margin:auto;
    width: 550px;
}
section#fourth li {
    padding: 8px 10px;
    transition: all .5s;
    background: brown;
    display: block;
    width: 30px;
    margin-bottom: 3px;
}
section#fourth li a{
color: #fff;
font-weight: bold;

}

section#fourth li:hover{
    border-top: 5px solid #000;
    transform: rotate(-90deg);
}
section#fourth li span{
  display:block;
}
section#fourth li:hover span{
  transform: rotate(90deg);
}
section#fourth li:hover a{ 
  transform: rotate(90deg);
  text-decoration: underline;
}

Check updated fiddle