Menu transformation - ul li to select option

index.html

<div id="main-menu">
								<nav>					
                                    <ul class="menu"><li class="current-menu-item"><a href="#link1">Link1</a></li>
<li><a href="#link2">Link2</a></li>
<li><a href="#link3">Link3</a></li>
<li><a href="#link4">Link4</a>
</li>
</ul>										
									</nav>
							</div>

<p class="hint">Resize this window to see the effect</p>

Menu-responsive-transformation-ul-li-to-select-option.markdown

Menu transformation - ul li to select option

In this Pen I'll show you how to transform website menu to dropdown menu automatically.

A Pen by Paweł Mansfeld on CodePen.

License.

script.js

$(document).ready(function(){
		if (matchMedia) {
		var mob = 0;
			var mq = window.matchMedia("(max-width: 767px)");
			mq.addListener(WidthChange); 
			WidthChange(mq); 
		}

		function WidthChange(mq) { 
			if (mq.matches) {	
			mob = 1;
				$("nav").append("<select />");
				
        
				$("<option />", {
				   "selected": "selected",
				   "value"   : "",
				   "text"    : "Menu..."
				}).appendTo("nav select");

				$("nav a").each(function() {
					 var el = $(this);
					 $("<option />", {
						 "value"   : el.attr("href"),
						 "text"    : el.text()
					 }).appendTo("nav select");
				});
				$("nav select").change(function() {
					window.location = $(this).find("option:selected").val();
				});	
				
				$('.menu').hide();	
			}
            
			else {
				$("nav select").hide();
                $('.menu').show();
			} 
		}
	});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

li {
  display:inline;
  margin:12px;
}

.hint{
  font-size:10px;
  color:#aaa;
}