CODEWITHSUNDEEP
htmlcss
olexii.lavrov
olexii.lavrov

Reputation: 109

Position of menu via CSS

Please help to understand how to make this menu of languages, that it just going up, in the top of languages link. And also it will react only on click, not on hover. Is it possible without JS? There is example : codepen.io.

CSS : 

.bot {
  position: fixed;
    bottom: 0;
    right: 0;
}

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    list-style: none;
}

.menu:focus ul {
    height: 100px;
    list-style: none;
}

HTML : 

<div class="bot">
    <div class="menu">Languages
        <ul>
          <li>English</li>
          <li>Russian</li>
          <li>ChEinise</li>
        </ul>
    </div>
</div>

Upvotes: 1

Views: 46

Answers (1)

UkFLSUI
UkFLSUI

Reputation: 5672

Try this. It should solve your problem:

ul,
li {
  margin: 0;
}

.bot {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-right: 20px;
  padding-bottom: 20px;
}

.menu {
  position: relative;
  display: inline-block;
}

.parent {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.parent:before {
  content: "Languages";
}

.parent:focus {
  pointer-events: none;
  cursor: pointer;
  outline: 0;
}

.parent:focus .child {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  outline: 0;
}

.child {
  right: 0;
  margin-right: 10px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.5s;
  list-style-type: none;
  cursor: pointer;
}

.child li a {
  text-decoration: none;
}
<div class="bot">
  <div class="menu">
    <div tabindex="0" class="parent">
      <ul class="child">
        <li><a href="http://www.google.com">English</a></li>
        <li><a href="http://www.google.com.ru">Russian</a></li>
        <li><a href="http://www.google.cn">Chinese</a></li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions