0

Estoy haciendo un menú desplegable que bien al pasar por encima con hover o al hacer click muestre dicho menú que a la vez se divide en dos partes, a la izquierda una lista de nombres o categorías y a la derecha otra lista con una imagen, título, descripción y detalles.

He probado varias maneras incluso casi lo tenía conseguido pero claro, me lo piden validado por la w3c y al usar

  • dentro no puedo meter div, h2, p etc etc, así que he vuelto a intentarlo de esta manera que sí valida pero ahora no me cuadra como antes.

    El código que he utilizado es el siguiente:

    $(document).ready(function(){
        
        	// MOSTRANDO Y OCULTANDO MENU
        	// PROFESIONALES	
        	$('#profesionales').click(function(){
        
        		$('#hijo1').removeClass('children-click').addClass('children');
        		$('#hijo2').removeClass('children-click').addClass('children');
        		$('#hijo3').removeClass('children-click').addClass('children');
        		$('#hijo4').removeClass('children-click').addClass('children');
        
        		if($('#profesionales').attr('class') == 'submenu' ){
        						
        			$('#hijo1').removeClass('children').addClass('children-click');			
        			
        		} else{
        						
        			$('#hijo1').removeClass('children-click').addClass('children');			
        
        		}
        	});
        
        	// HORÓSCOPO	
        	$('#horoscopo').click(function(){
        
        		$('#hijo1').removeClass('children-click').addClass('children');
        		$('#hijo2').removeClass('children-click').addClass('children');
        		$('#hijo3').removeClass('children-click').addClass('children');
        		$('#hijo4').removeClass('children-click').addClass('children');
        
        		if($('#horoscopo').attr('class') == 'submenu' ){
        						
        			$('#hijo2').removeClass('children').addClass('children-click');			
        			
        		} else{
        						
        			$('#hijo2').removeClass('children-click').addClass('children');			
        
        		}
        	});
        
        	// BLOG
        	$('#blog').click(function(){
        
        		$('#hijo1').removeClass('children-click').addClass('children');
        		$('#hijo2').removeClass('children-click').addClass('children');
        		$('#hijo3').removeClass('children-click').addClass('children');
        		$('#hijo4').removeClass('children-click').addClass('children');
        
        		if($('#blog').attr('class') == 'submenu' ){
        						
        			$('#hijo3').removeClass('children').addClass('children-click');			
        			
        		} else{
        						
        			$('#hijo3').removeClass('children-click').addClass('children');			
        
        		}
        	});
        
        	// UTILIDADES
        	$('#utilidades').click(function(){
        
        		$('#hijo1').removeClass('children-click').addClass('children');
        		$('#hijo2').removeClass('children-click').addClass('children');
        		$('#hijo3').removeClass('children-click').addClass('children');
        		$('#hijo4').removeClass('children-click').addClass('children');
        
        		if($('#utilidades').attr('class') == 'submenu' ){			
        			
        			$('#hijo4').removeClass('children').addClass('children-click');			
        			
        		} else{
        						
        			$('#hijo4').removeClass('children-click').addClass('children');			
        
        		}
        	});
        
        });
    *{
        		margin:0px;
        		padding:0px;
        		list-style: none;
        		text-decoration: none;	
        		font-size: 16px;
        		font-size: 1em;	
        		border:0;
        		box-sizing: border-box;
        		-webkit-box-sizing: border-box;
        		-moz-box-sizing: border-box;	
        	}
        
        	/*=============================================
        	SECCIÓN 2 MENÚ NAV
        	=============================================*/
        
        	nav#menu{	
        		padding-top: 30px;
        		background: #1F1F1F;
        		font-family: 'Roboto', sans-serif;
        		height: 90px;
        		height: 100px;	
        		text-align:center;
        		vertical-align: center;	
        		padding-bottom: 10px;	
        		z-index: 1000;	
        	}
        
        	.menu{
        		background: #111111; 
        	}
        
        	nav ul{
        		list-style: none;
        	}
        
        
        	nav ul li{
        		background: #111111; 		
        		color:#d4d4d4;
        		display: inline;	
        		line-height:38px;		
        		height:38px;	
        		margin: 0 0.5%;
        		text-align:center;	
        		display: inline-block;
        		position: relative;	
        	}
        
        	nav ul li:hover{
        		/*Desactivado temporalmente, por ahora solo como referencia para ver si hace falta o no*/		
        	}
        
        	nav ul li a{
        		display: inline-block;			
        		color:#d4d4d4;
        		line-height:38px;	
        		font-size:11px;	
        		font-weight:900;	
        		text-transform:uppercase;	
        		padding:0 8px;	
        	}
        
        	nav ul li a:hover{
        		background:#f9f8f6;
        		color:#252120;	
        		cursor:pointer !important;
        		opacity: 1;		
        	}
        
        	nav ul li a span{
        		margin-right: 10px;
        	}
        
        	nav ul li a:active{
        		background:rgba(255,0,100,1);
        	}
        
        	/* Zona desplegable, hover y click*/
        
        	#hijo1, #hijo2, #hijo3, #hijo4{	
        		border: 1px solid yellow;		
        		width: 363px;
        		z-index: 2001;	
        		min-height: 172px !important;
        		position: absolute;
        		left: -29px;
        		overflow: visible;
        		overflow: hidden;			
        		top:40px;/*Altura temporal solo en archivo de prueba*/
        	}
        
        	nav ul li .children li, nav ul li .children-click li{/*AFECTA A LOS LI EN HOVER*/
        		display: block;    
        		/*overflow: hidden;*/
        		overflow: visible; /*REVISAR AQUÍ YA QUE ASÍ ADMITE AL CLICKEAR*/      
        		height: 24px !important;
        		line-height: 24px !important;    
        		text-align: center;
        		text-transform: uppercase;
        		width: 162px;		
        	}
        
        	nav ul li .children li a, nav ul li .children-click li a {
        		display: block;     
        		background: #fff;   
        		font-size: 10px !important;
        		height: 24px !important;
        		line-height: 24px !important;   
        		color: #232122;
        		font-weight: 500;           
        	}
        
        	nav ul li:hover .children{
        		display: block;     
        	}
        
        	ul.children li a:hover{ 
        		background:#fdc003;
        		color:#FFF!important;
        		width: 100%;    
        	}
        
        	nav ul li .children, nav ul li .children-click{
        		display: none;   
        		position: absolute;   
        		z-index: 1000;    
        	}
        
        	nav ul li .children-click{  
        		display: block;/*AHORA AL CLICAR LOS MUESTRA*/        
        	}
        
        	li.sub-hijo1{	
        		float: left;
        		z-index: 2002;
        		margin: 0;
        		padding: 0;
        		vertical-align: top;
        		top:0;
        		display: block;		
        
        	}
        
        	li.sub-hijo2{	
        		float: right;
        		z-index: 2002;
        		margin: 0;
        		padding: 0;	
        		vertical-align: top;
        		top:0;	
        		display: block;		
        	}
        
        	nav ul li.sub-hijo2 ul li{	
        		/*Temporal solo de pureba;*/
        		z-index: 2052;
        		float: left;	
        	}
        
        	
        	li.sub-hijo2 ul.art-desplegable{
        		background: #ffffff;	
        		width: 363px;
        		z-index: 2005;
        		max-width: 513px;
        		padding: 5px;
        		margin: 0 15px;
        		height: 201px; 
        		min-height: 172px !important;	
        		font-family: 'Trebuchet MS', sans-serif;
        		padding: 10px;
        		padding: 0;
        		border: 1px solid #babab8 !important; 
        		top: -25px;/*Distancia temporal con respecto a los id #hijo*/
        		position: absolute;
        		left: -29px;		
        
        	}
        
        	li.sub-hijo2 ul.art-desplegable img{
        		float: left;
        		padding: 5px;	
        		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
        		margin: 25px 10px 0 10px;
        		width: 150px;
        		height: 150px;	
        		box-shadow: 0 0 5px #333;
        	}
        
        	.name-art-desplegable {
        		text-align: left !important;
        		padding: 5px 10px 8px 10px;		
        		font-size:14px;
        		color:#000;
        		height:70px;
        		overflow:hidden;
        		font-size: 18px;
        		font-weight: 400;
        		padding: 3px 0 8px 0;
        		height: 26px;
        		overflow: hidden;
        		margin-top: 20px;    		
        		/*font-family:'Roboto Condensed', sans-serif !important;
        		height:70px;*/
        
        	}
        	  
        	.name-art-desplegable a {color:#ffbb0f;}
        
        	.category-art-desplegable {
        		text-transform: uppercase;
        		font-weight: 400;
        		font-size: 12px;
        		padding: 10px 0 8px 0;
        		height: 24px;
        		overflow: hidden;
        		text-align: left;
        	}
        
        	.linkdet-art-desplegable {	
        		font-size: 12px;
        		margin: 14px 0 0 0;
        		padding-top: 80px;
        		text-align: left !important;
        	}
        
        	.linkdet-art-desplegable a {
        		color:#ffbb0f !important;    
        	}
        	
        	nav#menu i {
        		color:#d4d4d4;
        		font-size: 4px;			
        		margin:0 0 0 1%;
        		position: relative;	
        		bottom: 2px;
        		margin-left: 10px;	
        		display: inline;
        	}
    <!DOCTYPE html>
        <html lang="es">
        <head>
        	<meta charset="UTF-8">
        
        	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        
        	<title>Probando menú desplegable.</title>
        
        	<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
        	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        	<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
        	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> 
        
        	<script src="http://code.jquery.com/jquery-latest.js"></script> 
        
        	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css
    
    " >	
        	
        </head>
        <body>
        	<nav id="menu" class="fila">			
        		<ul class="menu">			
        			<li id="profesionales" class="submenu">
        				<a href="#" class="">Profesionales</a><i class="fa fa-circle" aria-hidden="true"></i>
        				<ul id="hijo1" class="children"> 
        					<li class="sub-hijo1">					
        						<ul class="">
        							<li><a href="#">SubElemento #1</a></li>
        							<li><a href="#">SubElemento #2</a></li>
        							<li><a href="#">SubElemento #3</a></li>
        							<li><a href="#">SubElemento #4</a></li>
        							<li><a href="#">SubElemento #5</a></li>								
        						</ul>
        					<li>
        					<li class="sub-hijo2">
        						<ul class="art-desplegable">								
        							<li class="aqui-enlace-o-imagen">
        								<a class="thumb" href=""><img  src="views/images/energeticas.jpg" title="" alt="" width="150" height="150" /></a>
        							</li>
        							<li class="name-art-desplegable">
        								<a href="">Título</a>
        							</li>
        							<li class="category-art-desplegable">
        								<a href="">Descripción categoría</a>
        							</li>
        							<li class="text-art-desplegable"></li>
        							<li class="linkdet-art-desplegable">
        								<a href="">+ Mas detalles</a>
        							</li>						
        						</ul>						
        					</li>
        				</ul> 					
        			</li>	
        			<li id="horoscopo" class="submenu"><a href="#" class="">Horóscopo</a><i class="fa fa-circle" aria-hidden="true"></i>
        				<ul id="hijo2" class="children">
        					<li class="sub-hijo1">					
        						<ul class="">
        							<li><a href="#">SubElemento #1</a></li>
        							<li><a href="#">SubElemento #2</a></li>
        							<li><a href="#">SubElemento #3</a></li>
        							<li><a href="#">SubElemento #4</a></li>
        							<li><a href="#">SubElemento #5</a></li>	
        							<li><a href="#">SubElemento #6</a></li>
        							<li><a href="#">SubElemento #7</a></li>						
        						</ul>
        					<li>			
        				</ul>
        			</li>
        			<li><a href="quiz" class="">Quiz</a><i class="fa fa-circle" aria-hidden="true"></i></li>
        			
        				</ul>
        			</li>							
        		</ul> 
        	</nav>    
      </body>
    </html>

    Me debería quedar así como en esta imagen

    Menu desplegable correcto

    pero me sale así:

    Menú actual con errores

    ¿Como podría volver a dejarlo como en la primera imagen? ¿Alguna otra idea para hacer este menú semántico y por la w3c?

    Saludos.

    1 respuesta 1

    1

    Espero que esto te sirva:

    Test: https://codepen.io/logoys/pen/eVaqBm

    Nota: Al validar el HTML no da ningùn warning por parte de la W3C

    HTML:

          <nav> 
        <ul id="headerMenu">
          <li>
            <a href="#">Profesionales</a>
            <ul class="submenu">
              <li data-id="sub1">
                <a href="#">Subelemento #1</a>
              </li>
              <li data-id="sub2">
                <a href="#">Subelemento #2</a>
              </li>          
            </ul>
          </li>
          <li>
            <a href="#">Horòscopo</a>
             <ul class="submenu">
              <li data-id="sub3">
                <a href="#">Subelemento #1</a>
              </li>
              <li data-id="sub4">
                <a href="#">Subelemento #2</a>
              </li>          
            </ul>       
          </li>
          <li><a href="#">Quiz</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </nav>
    
      <article class="view hide" id="sub1">
        <div>
          <img src="http://via.placeholder.com/180x180" alt="" title="">
        </div>
        <div>
          <h2>Contenido 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </article>
    
      <article class="view hide" id="sub2">
        <div>
          <img src="http://via.placeholder.com/180x180" alt="" title="">
        </div>
        <div>
          <h2>Contenido 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </article>
    
      <article class="view hide" id="sub3">
        <div>
          <img src="http://via.placeholder.com/180x180" alt="" title="">
        </div>
        <div>
          <h2>Contenido 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </article>
    
      <article class="view hide" id="sub4">
        <div>
          <img src="http://via.placeholder.com/180x180" alt="" title="">
        </div>
        <div>
          <h2>Contenido 4</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </article>
    

    JS (jQuery):

      (function ($){
        $.fn.menu = function() {
          var 
          menu = $(this),
          items = menu.children('li'),
          submenus = items.find('.submenu'),
          subItem = submenus.children('li').each(function(){
            let contentID = null, element;
            $(this).mouseover(function(){
              contentID = $(this).data('id');
              element = $('#' + contentID);
              var $clone = element.clone().removeAttr('id').removeClass('hide');
              $clone.appendTo($(this).parent());
            });
            $(this).mouseout(function(){
              $(this).parent().find('article').remove();
            });
          });
    
        }
      }(jQuery));
    
      //Inicializar
      $('#headerMenu').menu();
    

    CSS (Si necesitas el SASS checa el link de codepen:

    @import url("https://fonts.googleapis.com/css?family=Roboto");
    body {
      font-family: "Roboto", sans-serif;
      margin: 0;
      background-color: #c0c0c0;
    }
    
    nav {
      display: block;
      widht: 100%;
      background-color: #000;
    }
    nav > ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav > ul > li {
      display: inline-block;
      position: relative;
    }
    nav > ul > li > a {
      color: #fff;
      display: inline-block;
    }
    nav > ul > li > a:hover {
      background-color: #fff;
      color: #000;
    }
    nav > ul > li:hover ul {
      display: block;
    }
    nav > ul li ul {
      display: none;
      z-index: 99999;
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 300px;
      background-color: #fff;
      -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    }
    nav > ul li ul > li {
      position: relative;
    }
    nav > ul li ul > li a {
      display: inline-block;
    }
    nav > ul li a {
      text-transform: uppercase;
      text-decoration: none;
      padding: 1rem;
    }
    
    .view {
      width: 500px;
      background-color: #fff;
      padding: 1rem;
      display: table;
      position: absolute;
      top: 0;
      left: 100%;
    }
    .view.hide {
      display: none;
    }
    .view.show {
      display: table;
    }
    .view > div {
      display: table-cell;
      vertical-align: top;
      width: auto;
    }
    .view > div:nth-child(1) {
      vertical-align: middle;
    }
    .view > div:nth-child(2) {
      padding-left: 1rem;
      text-align: justify;
    }
    .view > div:nth-child(2) h2 {
      margin: 0 0 1rem 0;
    }
    .view > div:nth-child(2) p {
      text-transform: uppercase;
    }
    

    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.