1

Hola amigos de esta plataforma tengo un problema con este menú que estoy haciendo pero no tiene un ligero error ya que cuando hago click en el texto donde esta el link se quita y no me deja ir ala pagina que puedo hacer en este caso?
me gustaria saber si hay una funcion en jquery para arregar el prolema que tengo ya que con CSS puro no se puede
abajo hay una repuesta que me funciona pero despues no cierra el menu

Hola amigos de esta plataforma tengo un problema con este menú que estoy haciendo pero no tiene un ligero error ya que cuando hago click en el texto donde esta el link se quita y no me deja ir ala pagina que puedo hacer en este caso?
me gustaria saber si hay una funcion en jquery para arregar el prolema que tengo ya que con CSS puro no se puede
abajo hay una repuesta que me funciona pero despues no cierra el menu

Hola amigos de esta plataforma tengo un problema con este menú que estoy haciendo pero no tiene un ligero error ya que cuando hago click en el texto donde esta el link se quita y no me deja ir ala pagina que puedo hacer en este caso?
me gustaria saber si hay una funcion en jquery para arregar el prolema que tengo ya que con CSS puro no se puede
abajo hay una repuesta que me funciona pero despues no cierra el menu

Hola amigos de esta plataforma tengo un problema con este menú que estoy haciendo pero no tiene un ligero error ya que cuando hago click en el texto donde esta el link se quita y no me deja ir ala pagina que puedo hacer en este caso?
me gustaria saber si hay una funcion en jquery para arregar el prolema que tengo ya que con CSS puro no se puede
abajo hay una repuesta que me funciona pero despues no cierra el menu

.onclick-menu {
  position: relative;
  display: inline-block;
  background-color: #444442;
  margin-left: 1%;
  margin-top: 14px;
  border-radius: 50px;
  height: 24px;
  width: 6em;
  /* padding: 5px 0 0 9px; */
  color: #fff;
  line-height: 1.8;
  text-align: center;
}

.onclick-menu:before {
  content: " ";
}

.onclick-menu:focus .onclick-menu-content {
  display: block;
}

.onclick-menu:focus .dropdown-caret {
  display: block;
}

.onclick-menu-content {
  position: absolute;
  z-index: 1;
  display: none;
  list-style: none;
  background: #fff;
  width: 205px;
  color: #313030;
  text-decoration: none;
  margin: 0px;
  margin-top: 18%;
  padding: 0px;
  font-size: 13px;
  font-family: sans-serif;
  text-align: left;
  text-align: -webkit-left;
  padding: 12px 0 6px 0px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.onclick-menu-content li span {
  color: #66757f;
  display: block;
  font-family: 'Nunito', sans-serif;
  padding: 6px 15px;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.onclick-menu-content li span:hover {
  background: #e6e7ea;
  color: #313030;
  text-decoration: underline;
}

.onclick-menu a.text_topbar_span:hover,
.onclick-menu-content span.text_topbar_span:hover {
  background: #475fa5;
}
<div tabindex="0" class="onclick-menu">
  <span class="text_topbar_span dp_page">{{LANG Menu_header}}</span>
  <!--div class="dropdown-caret">
        			<div class="caret-outer"></div>
        			<div class="caret-inner"></div>
        		</div-->
  <ul class="onclick-menu-content on_pages">

    <a href="{{CONFIG site_url}}/page/useterms">
      <li><span>{{LANG Terms_of_Use}}</span></li>
    </a>
    <a href="{{CONFIG site_url}}/page/privacy">
      <li><span>{{LANG Privacy_Policy}}</span></li>
    </a>
    {{DATA_FACEBOOK}} {{DATA_TWITTER}} {{DATA_EMAIL}}
  </ul>
</div>

3
  • Este sitio no es multilingüe, por tanto la pregunta debe existir sólo en castellano. El texto inglés sería para la versión en inglés de Stackoverflow. En cuanto al problema, ¿usas algún framework? Sería bueno que lo menciones, pues no me parece código convencional.
    – A. Cedano
    el 30 abr. 2019 a las 18:07
  • ¿estás seguro que usas jquery? tu HTML no se ve muy amigable a jQuery que digamos.... el 30 abr. 2019 a las 18:21
  • No amigo, no tiene jquery solo es html y css pero no se hay una forma de usar una funcion en jquery para que funcione bien o en javascript si me puedes ayudar?
    – sode
    el 30 abr. 2019 a las 18:24

2 respuestas 2

1

El Menu se esconde ya que al hacer click en alguno de los link, el focus deja de estar en div class="onclick-menu"

Recomendaria usar Jquery, el cual crea dropmenu de forma muy simple

$('.onclick-menu').click(function(){
     $('.onclick-menu-content').slideToggle();
});

Con eso ya tendria un dropdwon simple.
El codigo no lo he probado, pero deberia funcionar con eso.
Saludos.

1

quizá te sirva de algo este código. Lo que se hace es ejecutar el método toggle() al ul, una vez hacemos click en el span (menú):

$('.text_topbar_span').on('click', () =>{
  $('.onclick-menu-content').toggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div tabindex="0" class="onclick-menu">
  <span class="text_topbar_span dp_page">Menú</span>
  <ul class="onclick-menu-content on_pages" style="display:none">
    <a href="https://www.google.com">
      <li><span>Términos</span></li>
    </a>
    <a href="https://www.google.com">
      <li><span>Políticas Privacidad</span></li>
    </a>
    Facebook Twitter Email
  </ul>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.