All Projects → AllThingsSmitty → Mega Nav

AllThingsSmitty / Mega Nav

Licence: mit
A simple mega nav menu in pure CSS

Projects that are alternatives of or similar to Mega Nav

React Native Navigation Drawer Extension
Drawer API built on top of wix react-native-navigation for iOS and Android (with TypeScript!)
Stars: ✭ 98 (-14.04%)
Mutual labels:  navigation
Bubble Navigation
🎉 [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of 🎨 customization option.
Stars: ✭ 1,537 (+1248.25%)
Mutual labels:  navigation
Wzrootnavigationcontroller
Stars: ✭ 111 (-2.63%)
Mutual labels:  navigation
Immersionbar
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,适配横竖屏切换、刘海屏、软键盘弹出等问题,可以修改状态栏字体颜色和导航栏图标颜色,以及不可修改字体颜色手机的适配,适用于Activity、Fragment、DialogFragment、Dialog,PopupWindow,一句代码轻松实现,以及对bar的其他设置,详见README。简书请参考:http://www.jianshu.com/p/2a884e211a62
Stars: ✭ 10,030 (+8698.25%)
Mutual labels:  navigation
Customnavigationbarsample
Navigation Bar Customization in Xamarin Forms
Stars: ✭ 104 (-8.77%)
Mutual labels:  navigation
Nativescript App Templates
Monorepo for NativeScript app templates
Stars: ✭ 108 (-5.26%)
Mutual labels:  navigation
Cleanarchitecture
Android Kotlin Clean Architecture
Stars: ✭ 94 (-17.54%)
Mutual labels:  navigation
Mesh navigation
ROS Mesh Navigation Bundle
Stars: ✭ 114 (+0%)
Mutual labels:  navigation
Turtlebot3 simulations
Simulations for TurtleBot3
Stars: ✭ 104 (-8.77%)
Mutual labels:  navigation
Navbot
Using RGB Image as Visual Input for Mapless Robot Navigation
Stars: ✭ 111 (-2.63%)
Mutual labels:  navigation
Material Bottomnavigation
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html
Stars: ✭ 1,375 (+1106.14%)
Mutual labels:  navigation
Gatsby Starter Saas Marketing
☁️ A simple one page marketing site starter for SaaS companies and indie hackers
Stars: ✭ 103 (-9.65%)
Mutual labels:  navigation
Jvfloatingdrawer
An easy to use floating drawer view controller.
Stars: ✭ 1,424 (+1149.12%)
Mutual labels:  navigation
Flyoutnavigation
Stars: ✭ 99 (-13.16%)
Mutual labels:  navigation
Responsive Sidebar Navigation
An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.
Stars: ✭ 111 (-2.63%)
Mutual labels:  navigation
Rvo2 Unity
use rvo2 (Optimal Reciprocal Collision Avoidance) in unity.
Stars: ✭ 97 (-14.91%)
Mutual labels:  navigation
Osmscout Server
Maps server providing tiles, geocoder, and router
Stars: ✭ 105 (-7.89%)
Mutual labels:  navigation
Mvvm Architecture
The practice of MVVM + Jetpack architecture in Android.
Stars: ✭ 1,634 (+1333.33%)
Mutual labels:  navigation
Regretful Agent
PyTorch code for CVPR 2019 paper: The Regretful Agent: Heuristic-Aided Navigation through Progress Estimation
Stars: ✭ 113 (-0.88%)
Mutual labels:  navigation
Indoor Navigation Algorithms
This is a public repository of a Navigine company that develops different kinds of indoor positioning algorithms with the main focus on indoor navigation. Here we will step by step publish the source code of our algorithm starting with trilateration.
Stars: ✭ 108 (-5.26%)
Mutual labels:  navigation

Mega Nav in CSS

A simple mega nav menu in pure CSS.

Mega Wut?

Mega navs are an effective feature for large menu content and surprisingly easy to implement. If you've wanted to put one together but didn't know where to start, this quick walkthrough is for you.

How'd You Do It?

This implementation uses just CSS and nothing else. After creating a menu list, add <div class="mega-menu"> to the menu item where the mega nav should display. The following mega-menu class will hide the menu:

.mega-menu {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  position: absolute;
  transition: all .3s ease .15s;
  visibility: hidden;
  width: 100%;
}

The mega nav is hidden until you hover over the menu item:

li:hover > .mega-menu {
  opacity: 1;
  overflow: visible;
  visibility: visible;
}

And voila...

Mega nav image 1

This implementation uses ARIA landmark roles following WCAG 2.0 compliance for accessibility. Keyboard-only navigation isn't include.

Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE8+.

License

The MIT License (MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].