CSS menu closing when clicking the items inside

Question

CSS menu closing when clicking the items inside

Navigation

#1 by (1 votes)

1

I made the following menu in css and the opening / closing is normal, but when I click on any submenu items, the menu closes before redirecting.

Would you have some way around this?

#menu {
  position: relative;
  float: left;
  display: inline-block;
  margin: 10px 100px;
}

.item {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #969696;
  margin-left: 30px;
  cursor: pointer;
 }

.open-button {
  display: block;
  width: 100%;
  background-image: url(../../img/select-arrow-down.png);
  background-repeat: no-repeat;
  background-position: top right;
  padding-right: 20px;
}

.open-button:focus {
  pointer-events: none;
 }

.open-button:focus + ul {
  display: block;
}

ul {
  position: absolute;
  display: none;
  top: 40px;
  right: -20px;
  width: 200px;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 0px 4px 6px #ccc;
  background-color: #fafafa;
}

li {
  position: relative;
  float: left;
  display: inline-block;
  width: 100%;
}

a {
  position: relative;
  float: left;
  display: inline-block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding: 0 25px;
}

a:hover {
  background-color: #f0f0f0;
  text-decoration: none;
}

<nav id="menu">
  <div class="item">
      <span class="open-button" tabindex="0">Menu</span>

    <ul>
         <li>
           <a href="{{ route('cliente-conta') }}">Meus dados</a>
         </li>

         <li>
           <a href="{{ route('pedidos') }}">Meus pedidos</a>
         </li>

         <li>
           <a href="{{ route('cliente-logout') }}">Sair</a>
         </li>
      </ul>
    </div>
</nav>

css menu

asked by anonymous 26.03.2018 / 18:19

1 answer

CSS Grid Layout - How to horizontally center all elements in all Grid Lines of a Sub-Grid? How to retrieve the nameservers provided by aws?

score 1 · Accepted Answer

You can not keep the menu open because you are using pseudo class :focus to open the Menu, so when you change :focus (clicking on the link) the .open-button:focus menu loses focus and closes the Menu . I made an example that I could serve you. I have not done all the CSS from the menu that opens because I do not think it's the purpose here.

To solve your problem I made the Menu using a checkbox , how much it is checked opens the menu, and when not it closes the menu with display:block/none and the stylization you do using pseudo class :checked

See below a simple template using a ::after pseudo element to make an icon open and close (very simple, but you can use images in content:'' if you want)

.item {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #969696;
  margin-left: 30px;
  cursor: pointer;
}
.item {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #969696;
  margin-left: 30px;
  cursor: pointer;
}

nav input[type="checkbox"] {
    display: none;
}

ul {
    display: none;
}
input:checked ~ ul {
    display: block;
}
input:checked + label {
    color: red;
}
input + label::after {
    content: " +";
    font-size: 24px;
    font-weight: bold;
}
input:checked + label::after {
    content: " -";
    color: red;
}

<nav>
    <input type="checkbox" id="menu">
    <label class="item" for="menu">Menu</label>
    <ul>
        <li>
            <a href="{{ route('cliente-conta') }}">Meus dados</a>
        </li>
        <li>
            <a href="{{ route('pedidos') }}">Meus pedidos</a>
        </li>
        <li>
            <a href="{{ route('cliente-logout') }}">Sair</a>
        </li>
    </ul>
</nav>

OBS: