Position of menu via CSS

Question

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>

Would you please include a screenshot of that website into your question's body? The link may get broken someday, and the question will be difficult to be understood. — sɐunıɔןɐqɐp, Jun 09 '18 at 13:38

UkFLSUI · Accepted Answer · 2018-06-09T14:59:16.267

1

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>

edited Jun 09 '18 at 14:59

answered Jun 09 '18 at 12:08

UkFLSUI

5,509
6
32
47

Awesome! thank you! just one more quick question, is it possible to remove all borders? leave jut text – olexii.lavrov Jun 09 '18 at 13:24
@olexii.lavrov sorry, where are the borders? I can see only texts here. – UkFLSUI Jun 09 '18 at 13:54
nvm, i got one more question XD links inside are disabled :( why? thank you again for the response) – olexii.lavrov Jun 09 '18 at 14:03
@olexii.lavrov I've updated the code. I guess now all problems are solved. I've also found the borders problem in Google Chrome browser. As Firefox displayed it right, I could not understand then. Now all are fixed :) – UkFLSUI Jun 09 '18 at 15:01

Position of menu via CSS

1 Answers1