Home / Questions / 296802
Accepted
Andres
Asked: 2020-09-28 09:12:34 +0800 CST 2020-09-28 09:12:34 +0800 CST

automatic alignment of sub menus

  • 772

I'm trying to make a submenu vary its position depending on whether it fits on the screen or not.

In the Snippet they will see a menu similar to the one I want to do and if they are placed in the New York offices (and also the screen is small) the sub menu is off the screen and I would like it to align on the other side , it's possible?

/* Menu Styles */

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.third-level-menu > li {
  height: 30px;
  background: #999999;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}
.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  
 
}
.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
  
}
.second-level-menu > li:last-child {
  border-radius: 0px 0px 8px 8px;
}

.second-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  width: 150px;
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu li:hover > ul {
  /* On hover, display the next level's menu */
  display: inline;
}
/* Menu Link Styles */

.top-level-menu a
/* Apply to all links inside the multi-level menu */

{
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}
<ul class="top-level-menu">
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Services</a>
  </li>
  <li>
    <a href="#">Offices</a>
    <ul class="second-level-menu">
      <li><a href="#">Chicago</a>
      </li>
      <li><a href="#">Los Angeles</a>
      </li>
      <li>
        <a href="#">New York</a>
        <ul class="third-level-menu">
          <li><a href="#">Information</a>
          </li>
          <li><a href="#">Book a Meeting</a>
          </li>
          <li><a href="#">Testimonials</a>
          </li>
          <li><a href="#">Jobs</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Seattle</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

You can also see the code in the JSFiddle ( https://jsfiddle.net/cw8w6rwr/ )

css

1 Answers

  1. Best Answer

    I think what you need is for the menu to collapse when the screen reaches a certain size... If so, the following example media-queriesmight help you achieve that.

    @import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #212121;
	font-size:22px;
	line-height: 32px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
}	

h3 {
	font-size: 30px;
	line-height: 34px;
	text-align: center;
	color: #FFF;
}

h3 a {
	color: #FFF;
}

a {
	color: #FFF;
}

h1 {
	margin-top: 100px;
	text-align:center;
	font-size:60px;
	line-height: 70px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Asignar un background-color al contenedor del nav. */
nav { 
	margin:0;
	padding: 0;
	background-color: #254441;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
}

/* agregamos un clear después del container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removemos el padding, margin and "list-style" de la lista "ul",
 * y agregamos "position:reltive" */
nav ul {
	float: left;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Posicionamos los items de navegación inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #254441;
	}

/* Damos estilos a los links */
nav a {
	display:block;
	padding:14px 20px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Cambiamos el color al hacer Hover */
nav a:hover { 
	background-color: #000000; 
}

/* Ocultamos los Dropdowns por defecto
 * y les da mos una posición absoluta */
nav ul ul {
	display: none;
	position: absolute;
	top: 60px; 
}
	
/* Mostramos los Dropdowns al hacer Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Dropdown primer nivel */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Segundo, tercero y otros niveles */
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px; 
}


li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Ocultamos los menu de navegación por defecto */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Damos estilos a toggle */
	.toggle {
		display: block;
		background-color: #254441;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Mostramos el Dropdown al hacer click en el padre */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Cambiamos el ancho de los items a 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Ocultamos los menu de navegación por defecto */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
	}
		
	/* Ocultamos los menus al hacer hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Dropdown primer nivel */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static; 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}
    <nav>
        

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li>

                <!-- Drop Down primer nivel -->
                <label for="drop-2" class="toggle">Offices</label>
                <a href="#">Offices</a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Chicago</a></li>
                    <li><a href="#">Los Angeles</a></li>
                    <li>
                       
                    <!-- Drop Down segundo nivel -->        
                    <label for="drop-3" class="toggle">New York</label>
                    <a href="#">New York</a>         
                    <input type="checkbox" id="drop-3"/>

                    <ul>
                        <li><a href="#">Information</a></li>
                        <li><a href="#">Book a Meeting</a></li>
                        <li><a href="#">Testimonials</a></li>
                        <li><a href="#">Jobs</a></li>
                    </ul>
                    </li>
                    <li><a href="#">Seattle</a></li>
                </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>


        <p> Acá iría el contenido </p>
        <p> Observa el comportamiento del snippet en pantalla completa y luego cambia el tamaño de la pantalla para que puedas ver el menú colapsable en acción </p>

    • 1