Menu in columns

Developer
Khoné Vongsouthi
Size
2,715 Kb
Views
14,168
  1. Menu in columns Previews
  2. Menu in columns HTML Codes
  3. Menu in columns CSS Codes

How do I make an menu in columns?

What is a menu in columns? How do you make a menu in columns? This script and codes were developed by Khoné Vongsouthi on 02 December 2022, Friday.

Menu in columns Previews
IQ Test

Menu in columns - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu in columns</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* NAV - Global */
.nav-lvl-1-item,
.nav-lvl-2-item { display: block; float: left;
}
.nav-lvl-1,
.nav-lvl-2 { margin: 0; padding: 0;
}
.nav-panel,
.nav-lvl-2,
.nav-lvl-2-item { width: 200px;
}
.nav-lvl-1-name,
.nav-lvl-2-name { display: inline-block; text-decoration: none; color: #fff;
}
.nav-lvl-1-item,
.nav-lvl-2,
.nav-lvl-2-name { transition: all .3s ease-in-out;
}
#nav,
.nav-lvl-1,
.nav-lvl-2 { float: left;
}
.nav-lvl-1-item { position: relative; overflow: hidden; background: #ddd; cursor: pointer;
}
.nav-lvl-1-item + .nav-lvl-1-item { margin-left: 10px;
}
.nav-lvl-1-item:hover,
.nav-lvl-1-item:focus { background: #222;
}
.nav-panel { display: table-cell; padding: 10px; height: 380px; text-align: right; vertical-align: bottom;
}
.nav-lvl-1-name { font-size: 30px; line-height: 30px; text-transform: uppercase;
}
.nav-lvl-2 { margin: 10px 0 -110%; /*padding-bottom: 100px;*/ height: 190px;
}
.nav-lvl-1-item:hover .nav-lvl-2,
.nav-lvl-1-item:focus .nav-lvl-2,
.nav-lvl-1-name:hover + .nav-lvl-2,
.nav-lvl-1-name:focus + .nav-lvl-2,
.nav-lvl-1-name:active + .nav-lvl-2 { margin-bottom: auto;
}
.nav-lvl-2-name,
.nav-lvl-2-name:link,
.nav-lvl-2-name:visited { font-weight: bold; font-size: 12px; opacity: .1;
}
a.nav-lvl-2-name:hover,
a.nav-lvl-2-name:focus,
a.nav-lvl-2-name:active { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav id="nav" role="navigation"> <ul class="nav-lvl-1"> <li class="nav-lvl-1-item"> <div class="nav-panel"> <strong class="nav-lvl-1-name">Work</strong> <ul class="nav-lvl-2"> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Flyer</a></li> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Logo</a></li> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Webdesign</a></li> </ul> </div> </li> <li class="nav-lvl-1-item"> <div class="nav-panel"> <strong class="nav-lvl-1-name">About</strong> <ul class="nav-lvl-2"> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Formation</a></li> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Professional</a></li> </ul> </div> </li> <li class="nav-lvl-1-item"> <div class="nav-panel"> <strong class="nav-lvl-1-name">Contact</strong> <ul class="nav-lvl-2"> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Facebook</a></li> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Twitter</a></li> <li class="nav-lvl-2-item"><a class="nav-lvl-2-name" href="#">Google +</a></li> </ul> </div> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Menu in columns - Script Codes CSS Codes

/* NAV - Global */
.nav-lvl-1-item,
.nav-lvl-2-item { display: block; float: left;
}
.nav-lvl-1,
.nav-lvl-2 { margin: 0; padding: 0;
}
.nav-panel,
.nav-lvl-2,
.nav-lvl-2-item { width: 200px;
}
.nav-lvl-1-name,
.nav-lvl-2-name { display: inline-block; text-decoration: none; color: #fff;
}
.nav-lvl-1-item,
.nav-lvl-2,
.nav-lvl-2-name { transition: all .3s ease-in-out;
}
#nav,
.nav-lvl-1,
.nav-lvl-2 { float: left;
}
.nav-lvl-1-item { position: relative; overflow: hidden; background: #ddd; cursor: pointer;
}
.nav-lvl-1-item + .nav-lvl-1-item { margin-left: 10px;
}
.nav-lvl-1-item:hover,
.nav-lvl-1-item:focus { background: #222;
}
.nav-panel { display: table-cell; padding: 10px; height: 380px; text-align: right; vertical-align: bottom;
}
.nav-lvl-1-name { font-size: 30px; line-height: 30px; text-transform: uppercase;
}
.nav-lvl-2 { margin: 10px 0 -110%; /*padding-bottom: 100px;*/ height: 190px;
}
.nav-lvl-1-item:hover .nav-lvl-2,
.nav-lvl-1-item:focus .nav-lvl-2,
.nav-lvl-1-name:hover + .nav-lvl-2,
.nav-lvl-1-name:focus + .nav-lvl-2,
.nav-lvl-1-name:active + .nav-lvl-2 { margin-bottom: auto;
}
.nav-lvl-2-name,
.nav-lvl-2-name:link,
.nav-lvl-2-name:visited { font-weight: bold; font-size: 12px; opacity: .1;
}
a.nav-lvl-2-name:hover,
a.nav-lvl-2-name:focus,
a.nav-lvl-2-name:active { opacity: 1;
}
Menu in columns - Script Codes
Menu in columns - Script Codes
Home Page Home
Developer Khoné Vongsouthi
Username khone-vongsouthi
Uploaded December 02, 2022
Rating 3
Size 2,715 Kb
Views 14,168
Do you need developer help for Menu in columns?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khoné Vongsouthi (khone-vongsouthi) Script Codes
Name
Map
Language - Selector
Social navigation in pure CSS3
Tooltip
Datepicker
Slider
List
Menu - Restaurant
Jumbotron
Button - Center middle
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!