Skip to main content

Responsive Mega Mega Dropdown Menu for website






Mega Dropdown





A responsive and easy to customise mega-dropdown component.A responsive mega dropdown component with sub-categories. Here is a quick animation we put together to show you our mobile vs desktop approach:











Quick animation








Creating the structure




The HTML is structured in 2 main elements: the <header>, containing the dropdown (.cd-dropdown-wrapper), and the <main> for all the main content.

The .cd-dropdown-wrapper contains a .cd-dropdown-trigger, to trigger the dropdown, and a .cd-dropdown, which is composed of nested unordered lists.





<header>
	<div class="cd-dropdown-wrapper">
		<a class="cd-dropdown-trigger" href="#0">Dropdown</a>
		<nav class="cd-dropdown">
			<h2>Title</h2>
			<a href="#0" class="cd-close">Close</a>
			<ul class="cd-dropdown-content">
				<li>
					<form class="cd-search">
						<input type="search" placeholder="Search...">
					</form>
				</li>
				<li class="has-children">
					<a href="#0">Clothing</a>
 
					<ul class="cd-secondary-dropdown is-hidden">
						<li class="go-back"><a href="#0">Menu</a></li>
						<li class="see-all"><a href="#0">All Clothing</a></li>
						<li class="has-children">
							<a href="#0">Accessories</a>
 
							<ul class="is-hidden">
								<li class="go-back"><a href="#0">Clothing</a></li>
								<li class="see-all"><a href="#0">All Accessories</a></li>
								<li class="has-children">
									<a href="#0">Beanies</a>
 
									<ul class="is-hidden">
										<li class="go-back"><a href="#0">Accessories</a></li>
										<li class="see-all"><a href="#0">All Benies</a></li>
										<li><a href="#0">Caps &amp; Hats</a></li>
										<!-- other list items here -->
									</ul>
								</li>
								<li class="has-children">
									<a href="#0">Caps &amp; Hats</a>
 
									<ul class="is-hidden">
										<li class="go-back"><a href="#0">Accessories</a></li>
										<li class="see-all"><a href="#0">All Caps &amp; Hats</a></li>
										<li><a href="#0">Beanies</a></li>
										<!-- other list items here -->
									</ul>
								</li>
								<li><a href="#0">Glasses</a></li>
								<!-- other list items here -->
							</ul>
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
					</ul> <!-- .cd-secondary-dropdown -->
				</li> <!-- .has-children -->
 
				<li class="has-children">
					<!-- other list items here -->
				</li> <!-- .has-children -->
 
				<li class="has-children">
					<!-- other list items here -->
				</li> <!-- .has-children -->
 
				<li class="cd-divider">Divider</li>
 
				<li><a href="#0">Page 1</a></li>
				<!-- other list items here -->
 
			</ul> <!-- .cd-dropdown-content -->
		</nav> <!-- .cd-dropdown -->
	</div> <!-- .cd-dropdown-wrapper -->
</header>
 
<main class="cd-main-content">
	<!-- your content here -->
</main>





Adding style




For mobile devices, the basic idea was to let the user focus totally on the dropdown content, once it has been activated.

This is why we assigned a fixed position to the dropdown, and set its width and height to 100%. By default, it is hidden right above the viewport (translateY(-100%)). When the user clicks the trigger element, the .dropdown-is-active class is added to the dropdown which is translated back into the viewport.



.cd-dropdown {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform 0.5s;
}
.cd-dropdown.dropdown-is-active {
  transform: translateY(0);
}




When user selects a new sublevel in the dropdown, the visible items are translated to the left outside the viewport (using the .move-out class), while the new items slide back into the viewport (removing the class .is-hidden class from their

    parent element).


.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
  /* push the secondary dropdown items to the right */
  transform: translateX(100%);
}
 
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
  /* push the dropdown items to the left when secondary dropdown slides in */
  transform: translateX(-100%);
}






On bigger devices (viewport width bigger than 1024px), instead, there’s enough space to place content side by side, with no need to replace the visible content.




@media only screen and (min-width: 1024px) {

  .cd-dropdown {

    position: absolute;

    top: 100%;

    /* reset style*/

    height: auto;

    width: auto;

    opacity: 0;

    visibility: hidden;

    transform: translateY(30px);

    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;

  }

  .cd-dropdown.dropdown-is-active {

    visibility: visible;

    opacity: 1;

    transform: translateY(0);

    transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;

  }



  .cd-dropdown-content {

    /* reset mobile style */

    position: static;

    height: auto;

    width: 280px;

  }

  .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {

    transform: translateX(0);

    left: 100%;

    height: auto;

  }

  .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {

    /* reset mobile style */

    transform: translateX(0);

  }

  .cd-dropdown-content > .has-children > ul {

    visibility: hidden;

  }

  .cd-dropdown-content > .has-children:hover > ul {

    /* when hover over .cd-dropdown-content items - show subnavigation */

    visibility: visible;

  }

  .cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > li > ul {

    /* if .cd-secondary-dropdown is visible - show also subnavigation */

    visibility: visible;

  }

}




Changelog



JUN 17, 2015


  • Bug fixed on mobile version - prevent default when tapping on .has-children direct children




MAY 15, 2015


  • Integrated menu-aid plugin to detect diagonal movement

  • Created the .open-to-left class to open dropdown on the left

  • Added support for laptops with touchscreen




MAY 13, 2015


  • Resource released by CodyHouse














Labels:

Comments

Post a Comment

Feel free to leave your message here.

Popular posts from this blog

Codecanyon-King MEDIA v1.9.7 | Nulled Script | free download

King Media v1.9.7 Preview   Screenshots Download About King Media KingMedia is a content sharing script suitable for different posts formats: image upload image share from different hosts video posts with automated thumbnails creation Technical Info Created Updated High Resolution Compatible Browsers Files Software Version 5 June 14 27 May 15 Yes IE11, Firefox, Safari, Opera, Chrome JavaScript JS, JavaScript JSON, HTML, CSS, PHP PHP 4.x, PHP 5.x, PHP 5.0 - 5.2, PHP 5.3, PHP 5.4 Features Image Upload & Share From Url , Youtube, Facebook, Vimeo, VK, Vine, Instagram, Metacafe, DailyMotion Videos and Soundcloud Comments for Media Facebook Comments Responsive Layout User Profile & Points Tags or Category System Super Easy Installation Full Admin Panel Moderate Guest Submissions Social Share Buttons Search for Media Seo Url Much More… Gold Media Reviews Download Now! Requirements PHP 4.3 or later, PHP 5.4.x for all functionality. MySQL 4.1 or ...
Post a Comment
Read more

Opera Browser Offline Installer Latest Version Free Download(Win+Mac+Linux+Android)

Opera Browser About Opera Browser Download Opera Browser Offline Installer Latest Version.Opera is also available in both offline and live installer.Opera products enable more than 350 million internet consumers to discover and connect with the content and services that matter most to them, no matter what device, network or location. In turn, we help advertisers reach the audiences that build value for their businesses. Opera also delivers products and services to more than 120 operators around the world, enabling them to provide a faster, more economical and better network experience to their subscribers. From family photos and funny videos to business ideas that change the world economy, the internet has always been about discovery. Whether you are a consumer getting online for the first time, or a multinational corporation trying to reach the right audience, Opera can help you discover more online. Opera for Windows Opera browser – Do more on the web Opera Features Stay in sync Eas...
Post a Comment
Read more

The 15 Most Stunningly Colorful Natural Wonders on Earth

The 15 Most Stunningly Colorful Natural Wonders on Earth Posted By  Stumbli on Jun 26,2018 Inspiration True Stories Look up at the sky, down at the ground, or out into the landscape, and you’ll see that our planet is a fascinating prism of hues, from multicolored mountains and deserts to astronomical curiosities and kaleidoscopic rivers. Bioluminescent waters in Tasmania If you’ve ever seen a firefly, then you’ve witnessed bioluminescence—a pulsating glow emitted by living organisms. Most bioluminescent creatures are marine life, though, and when they light up underwater, the whole sea seems to magically sparkle. There are plenty of these kinds of waters throughout the world, but the River Derwent in Tasmania offers a double whammy in the spring: bioluminescent waves, right beneath the Aurora Australis, a natural electric phenomenon that creates a technicolor sky. Rainbow eucalyptus groves in Maui, Hawaii The iconic Painted Forest on the road to Hana, Maui is saturated with eucalyp...
Post a Comment
Read more