Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Pure CSS3 3D Drop List Menu Navigation


Code Snippet </> Info


Snippet Name: Pure CSS3 3D Drop List Menu Navigation

Description: Add a pure CSS3 3D drop list menu that is sure to get your visitors attention.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-03-20 00:25:18

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pure CSS3 3D Drop List Menu Navigation</title> <style type="text/css"> /* Begin Pure CSS3 3D Drop List Menu Navigation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY { margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2); } #content {margin:0px 15px 0px 5px;} .menuHolder {margin:50px 0 0 0; text-align:center; position:relative; height:40px; z-index:20; background:#069; background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -moz-perspective:100px; -webkit-perspective:100px; -o-perspective:100px; perspective:100px; } .menuHolder ul.nav li {display:inline-block; display:inline;} .menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; } .menuHolder ul.nav li {float:left; display:block; padding:0 4px;} .menuHolder ul.nav > li {-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;} .menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;} .menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s; -moz-transform-origin:0px 0px; -moz-transform:rotateX(-90deg); -webkit-transform-origin:0px 0px; -webkit-transform:rotateX(-90deg); -o-transform-origin:0px 0px; -o-transform:rotateX(-90deg); transform-origin:0px 0px; transform:rotateX(-90deg); -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } .menuHolder ul.nav div.left {left:auto; right:4px;} .menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div ul.colLeft {margin-left:10px;} .menuHolder ul.nav div ul.colRight {margin-right:10px;} .menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} .menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menuHolder ul.nav div ul li:last-child {border:0;} .menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(arrow.gif) no-repeat left center;} .menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(arrow.gif) no-repeat 1px center;} .menuHolder ul.nav div.col1 {width:160px;} .menuHolder ul.nav div.col2 {width:310px;} .menuHolder ul.nav div.col3 {width:460px;} .menuHolder ul.nav li:hover div { -moz-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); -o-transform:rotateX(0deg); transform:rotateX(0deg); } #spacer {margin:200px 0 0 0;} </style> </head> <body> <div id="content"> <div class="menuHolder"> <ul class="nav"> <li><a class="top-a" href="#"><b>Home</b></a></li> <li><a class="top-a" href="#"><b>Resort</b></a> <div class="col3"> <ul class="colLeft"> <li><a href="#">Ski Slopes</a></li> <li><a href="#">Night Life</a></li> <li><a href="#">Restaurants</a></li> <li><a href="#">Car Hire</a></li> <li><a href="#">Ski Hire Facilities</a></li> </ul> <ul class="col"> <li><a href="#">Snow Hotel</a></li> <li><a href="#">The Snowman</a></li> <li><a href="#">Ice Cavern</a></li> <li><a href="#">Ski Inn</a></li> </ul> <ul class="colRight"> <li><a href="#">Advanced Skills</a></li> <li><a href="#">Beginners Slopes</a></li> <li><a href="#">Intermediate Slopes</a></li> <li><a href="#">Expert</a></li> </ul> </div> </li> <li><a class="top-a" href="#"><b>Information</b></a> <div class="col2"> <ul class="colLeft"> <li><a href="#">Lift Passes</a></li> <li><a href="#">Insurance</a></li> <li><a href="#">Ski Schools</a></li> <li><a href="#">Snow Report</a></li> <li><a href="#">Gear Rental</a></li> </ul> <ul class="colRight"> <li><a href="#">Boots</a></li> <li><a href="#">Skis</a></li> <li><a href="#">Ski Wear</a></li> <li><a href="#">Goggles</a></li> </ul> </div> </li> <li><a class="top-a" href="#"><b>Contact</b></a> <div class="col1"> <ul class="colSingle"> <li><a href="#">Email</a></li> <li><a href="#">Telephone</a></li> <li><a href="#">Online Form</a></li> <li><a href="#">Snail Mail Address</a></li> </ul> </div> </li> <li><a class="top-a" href="#"><b>Privacy</b></a></li> <li><a class="top-a" href="#"><b>Nearby</b></a> <div class="col2 left"> <ul class="colLeft"> <li><a href="#">Where to go</a></li> <li><a href="#">What to do</a></li> <li><a href="#">Places of interest</a></li> <li><a href="#">National parks & Museums</a></li> </ul> <ul class="colRight"> <li><a href="#">Snow Hotel</a></li> <li><a href="#">The Snowman</a></li> <li><a href="#">Ice Cavern</a></li> <li><a href="#">Ski Inn</a></li> </ul> </div> </li> </ul> </div> <div id="spacer"> <h3 align="center">Pure CSS3 3D Drop List Menu Navigation</h3> <div align="center">Roll your cursor over the navigation bar for an example. <br /> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_198.html">Pure CSS3 3D Drop List Menu Navigation Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library