Add drop down list to elements generated via Javascript

1 comment

1. Links inside <option> tag are not allowed and will not function. Below is an example of non-working <select> and quick-and-dirty solution for <select> if you have a list of links.

   <p>
       Non-working example:<br/>
       <select name="example1">
           <option value="" selected>Select one</option>
           <option><a href="http://www.stackoverflow.com">Stack Overflow</a></option>
           <option><a href="http://www.w3.org">W3C</a></option>
           <option><a href="http://www.alistapart.com">A List Apart</a></option>
       </select>
   </p>
   <p>
       Working example:<br/>
       <select name="example2" onchange="if(this.selectedIndex > 0){ window.location = this.options[this.selectedIndex].value; }">
           <option value="" selected>Select one</option>
           <option value="http://www.stackoverflow.com">Stack Overflow</option>
           <option value="http://www.w3.org">W3C</option>
           <option value="http://www.alistapart.com">A List Apart</option>
       </select>
   </p>

   However your links have # as URL with data- attributes meaning that the solution above won’t work. You need to use a dropdown menu (look for pure CSS or CSS/JS dropdown menu code). Below is just one example as seen at http://codepen.io/andornagy/pen/xhiJH :

   /* CSS Document */
   
   @import url(http://fonts.googleapis.com/css?family=Open+Sans);
   @import url(http://fonts.googleapis.com/css?family=Bree+Serif);
   
   body {
   	background: #FFF;
   	font-size:22px;
   	line-height: 32px;
   	color: #000;
   	word-wrap:break-word !important;
   	font-family: 'Open Sans', sans-serif;
   	}
   
   h1 {
   	font-size: 24px;
   	text-align: center;
   	color: #000;
   }	
   
   h3 {
   	font-size: 16px;
   	text-align: center;
   	color: #000;
   }
   
   h3 a {
   	color: #000;
   }
   
   a {
   	color: #000;
   }
   
   h1 {
   	margin-top: 50px;
   	text-align:center;
   	font-size:24px;
   	font-family: 'Bree Serif', 'serif';
   	}
   
   #container {
   	margin: 0 auto;
   	max-width: 890px;
   }
   
   p {
   	text-align: center;
   }
   
   #relatedContent {
     max-width: 800px;
     margin: 200px auto;
   }
   
   #relatedContent .item {
     max-width: 44%;
     padding: 3%;
     float: left;
     text-align: center;
   }
   
   #relatedContent .item a img {
     max-width: 100%;
   }	
   
   nav { 
   	margin: 50px 0;
   	background-color: #E64A19;
   }
   
   nav ul {
   	padding:0;
   	margin:0;
   	list-style: none;
   	position: relative;
   	}
   	
   nav ul li {
   	display:inline-block;
   	background-color: #E64A19;
   	}
   
   nav a {
   	display:block;
   	padding:0 10px;	
   	color:#FFF;
   	font-size:20px;
   	line-height: 60px;
   	text-decoration:none;
   }
   
   nav a:hover { 
   	background-color: #000000; 
   }
   
   /* Hide Dropdowns by Default */
   nav ul ul {
   	display: none;
   	position: absolute; 
   	top: 60px;
   }
   	
   /* Display Dropdowns on Hover */
   nav ul li:hover > ul {
   	display:inherit;
   }
   	
   /* Fisrt Tier Dropdown */
   nav ul ul li {
   	width:170px;
   	float:none;
   	display:list-item;
   	position: relative;
   }
   
   /* Second, Third and more Tiers	*/
   nav ul ul ul li {
   	position: relative;
   	top:-60px; 
   	left:170px;
   }
   
   	
   /* Change this in order to change the Dropdown symbol */
   li > a:after { content:  ' +'; }
   li > a:only-child:after { content: ''; }

   <div id="container">
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">WordPress</a>
               <!-- First Tier Drop Down -->
               <ul>
                   <li><a href="#">Themes</a></li>
                   <li><a href="#">Plugins</a></li>
                   <li><a href="#">Tutorials</a></li>
               </ul>        
               </li>
               <li><a href="#">Web Design</a>
               <!-- First Tier Drop Down -->
               <ul>
                   <li><a href="#">Resources</a></li>
                   <li><a href="#">Links</a></li>
                   <li><a href="#">Tutorials</a>
               	<!-- Second Tier Drop Down -->
                   <ul>
                       <li><a href="#">HTML/CSS</a></li>
                       <li><a href="#">jQuery</a></li>
                       <li><a href="#">Other</a>
                           <!-- Third Tier Drop Down -->
                           <ul>
                               <li><a href="#">Stuff</a></li>
                               <li><a href="#">Things</a></li>
                               <li><a href="#">Other Stuff</a></li>
                           </ul>
                       </li>
                   </ul>
                   </li>
               </ul>
               </li>
           </ul>
       </nav>
     <h1>Pure CSS Drop Down Menu</h1>
   <p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
   <p>Read tutorial <a target="_blank" href="http://andornagy.com/css-dropdown-menu/">here</a></p>
   </div>

   Log in to Reply