Responsive drop-down menu

I have a css drop-down menu (made with your help), that works well in big screen and in smartphone screen, but not in desktop small screen (less than 800 px of height): because I have many entries, they don’t are shown (the last, I ,mean: are shown only the first 10/11 items).

Here is the code:

css

	#menu, #menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
		min-width: 200px;
	}
	
	#menu {
		width: auto; 
		margin-left: auto; margin-right: auto; 
		margin-top: 2%; margin-bottom: 1%;
		background-color: #585858;
		background-image: linear-gradient(to bottom, #606060, #9F9F9F);
		border-radius: 8px;
		box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}
	
	#menu:before,
	#menu:after {
		content: "";
		display: table;
	}
	
	#menu:after {
		clear: both;
	}
	
	#menu {
		zoom:1;
	}
	
	#menu li {
		float: left;
		border-right: 1px solid #222;
		box-shadow: 1px 0 0 #444;
		position: relative;
	}
	
	#menu a {
		float: left;
		padding: 6px 18px;
		color: white;
/* 		text-transform: uppercase; */
		font: bold 50%;
		text-decoration: none;
		text-shadow: 0 1px 0 #000;
	}
	
	#menu li:hover > a {
		color: white;
	}
	
	*html #menu li a:hover { /* IE6 only */
		color: #969670;
	}
	
	#menu ul {
		margin: 20px 0 0 0;
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px;
		left: 0;
		z-index: 1;    
/* 		background: orange; */
		background: linear-gradient(#444, #111);
		box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
		border-radius: 3px;
		transition: all .2s ease-in-out;
	}

	#menu li:hover > ul, 
	#menu li:focus-within > ul {	
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	#menu ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
		_margin: 0; /*IE6 only*/
		box-shadow: -1px 0 0 rgba(255,255,255,.3);
	}
	
	#menu ul li {
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*IE6 only*/
		box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		min-width: 200px;
		background: #585858;
	}
	
	#menu ul li:last-child {   
		box-shadow: none;
	}
	
	#menu ul a {    
		padding: 7px;
		min-width: 130px;
		_height: 10px; /*IE6 only*/
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
		font-size: 70%;
	}
	
	#menu ul a:hover {
		background-color: #969670;
		background-image: linear-gradient(#585858, #969670);
		color: white;
	}
	
	#menu ul li:first-child > a {
		border-radius: 3px 3px 0 0;
	}
	
	#menu ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #444;
	}
	
	#menu ul ul li:first-child a:after {
		left: -6px;
		top: 50%;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #3b3b3b;
	}
	
	#menu ul li:first-child a:hover:after {
		border-bottom-color: #04acec; 
	}
	
	#menu ul ul li:first-child a:hover:after {
		border-right-color: #0299d3; 
		border-bottom-color: transparent; 	
	}
	
	#menu ul li:last-child > a {
		border-radius: 0 0 3px 3px;
	}
	
	/* Mobile */
	#menu-trigger {
		display: none;
	}

	@media screen and (max-width: 600px) {

		/* nav-wrap */
		#menu-wrap {
			position: relative;
		}

		#menu-wrap * {
			box-sizing: border-box;
		}

		/* menu icon */
		#menu-trigger {
			display: block; /* show menu icon */
			height: 40px;
			line-height: 40px;
			cursor: pointer;		
			padding: 0 0 0 35px;
			border: 1px solid #222;
			color: #fafafa;
			font-weight: bold;
			background-color: darkgray;
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
			border-radius: 6px;
			box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		}
		
		/* main nav */
		#menu {
			margin: 0; padding: 10px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;
			background-color: #585858;
			display: none;
			box-shadow: none;		
		}

		#menu:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #444;
		}	

		#menu ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			background: none;
			box-shadow: none;				
		}

		#menu ul ul {
			margin: 0 0 0 20px !important;
			box-shadow: none;
			display: none;
		}

		#menu li {
			position: static;
			display: block;
			float: none;
			border: 0;
			margin: 5px;
			box-shadow: none;			
		}

		#menu ul li{
			margin-left: 20px;
			box-shadow: none;
			padding: 0 0 0 8px;
		}

		#menu a{
			display: block;
			float: none;
			padding: 0;
			color: white;
		}

		#menu a:hover{
			color: #fafafa;
		}	

		#menu ul a{
			padding: 0;
			width: auto;		
		}

		#menu ul a:hover{
			background: none;	
		}

		#menu ul li:first-child a:after,
		#menu ul ul li:first-child a:after {
			border: 0;
		}		

	}

	@media screen and (min-width: 600px) {
		#menu {
			display: block !important;
		}
	}	

	/* iPad */
	.no-transition {
		transition: none;
		opacity: 1;
		visibility: visible;
		display: none;  		
	}

	#menu li:hover > .no-transition {
		display: block;
	}

html

     <div id="menu-wrap"> 
      <ul id="menu">
        <?php include "$root/menu-content.php"; ?>
      </ul>
     </div> 

menu-content.php is an unordered list.

I tried with overflow-y: auto, but unsuccessfully:

	@media screen and (max-height: 800px) {
		#menu li ul ul {
			overflow-y: auto;
		}
	}

Thank you.

If your menu has more then 10 entries, you should think about an other solution. It’s the same as for select fields. Humans are not build to check so many entries. Keep it simple. If you need more entries, think about grouping them or other things. But never open a menu with such a big list of entries. It’s not user friendly

2 Likes

They are no much more than 10: max 13.
I found this workaround (not elegant, but somehow working):


	@media screen and (max-height: 800px) {
		#menu li ul li {
			line-height: 5px;
		}
	}

I suppose the bulk of the HTML (the many menu items) are within the include.
It would be more useful to show the resulting HTML after the menu has been included.

Mixing up html, php and JavaScript in one file is 80th Style. I do not know why there are still so many people following this super old tutorials to learn PHP.

@web148

Don’t learn it that way! It’s really bad style

1 Like

I think that I will follow Thallius advice. I have to re-think all my website navigation system.
Thank you.

How do you manage NOT to mix HTML and PHP?

1 Like

Simply not use PHP as a frontend-creator. Frontend is frontend and should be in frontend language.

I think this is heading off-topic.
I only mention the PHP include because the question concerns only the HTML and CSS (possibly javascript). The back-end that creates the HTML is of no consequence to the problem.
What we need to see is the HTML that appears in the browser.

1 Like

As I said I followed the advice of Thallius. And to be honest I do not understand the question of Gandalf.

Just ignore me! As Sam pointed out it was off-topic in any event. :slight_smile:

1 Like

Sorry, Gandalf. But really I don’t understand what you meant :innocent: