2013 February 05 Archive - EXEIdeas

Hello again, it’s time for widget article. Here you’ll find pure CSS based drop-down multi level menu with down loadable files and explanations as well. My favorite here is the first pick — Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections — just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.PreviewI’ve had a few requests from readers asking how to install a drop-down menu without j-query due to heavy load. So here it is, a multi level dropdown/fly-out menu. The original code is from CSS Play. I modified the CSS part a little to adapt to Blogger template. This four level drop-down/fly-out menu should work in most browsers. A tab with small caps indicates it has upper level/levels. A drop-down/fly-out will appear when you hover the tab. First Have A Look On Image Or See The Demo By The Given Link. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) This Contain Only HTML-CSS.2.) This Will Also Contain J-Query Effect With Out JAVASCRIPT File.3.) Speed Loading Time Because There Is No JAVASCRIPT File.4.) 4 Level Drop-Down Menu.5.) Stylish Gradient Color With StylisgGradient Hover Effect.6.) Scroll With Your Page (Fixed Position At Top).How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Create A Backup Oh Your Template.4.) Open “Edit HTML” And Find Tag By Pressing (CTRL+F)5.) Now Copy The Below Code And Paste After .6.) Click Save Template, Now You Are Done.How To Add In Website?1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between .3.) Save It, Now You Are Done. #menu { background-color: #ba1eaa; background-image: -moz-linear-gradient(#04acec, #ba1eaa); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa)); background-image: -webkit-linear-gradient(#04acec, #ba1eaa); background-image: -o-linear-gradient(#04acec, #ba1eaa); background-image: -ms-linear-gradient(#04acec, #ba1eaa); background-image: linear-gradient(#04acec, #0186ba); height:35px;; text-align:center; position:fixed; z-index:20; right: 0%; left: 0%;}#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}#menu ul {display:inline-block;}#menu li {margin:0; padding:0; list-style:none;}#menu li {clear:both;float:none;}#menu ul ul {position:absolute; left:-9999px;}#menu ul.level1 {margin:0 auto;}#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}#menu ul.level1 {background-color: #ba1eaa;background-image: -moz-linear-gradient(#04acec, #ba1eaa);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));background-image: -webkit-linear-gradient(#04acec, #ba1eaa);background-image: -o-linear-gradient(#04acec, #ba1eaa);background-image: -ms-linear-gradient(#04acec, #ba1eaa);background-image: linear-gradient(#04acec, #0186ba)}#menu ul.level2 {background-color: #ba1eaa;background-image: -moz-linear-gradient(#04acec, #ba1eaa);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));background-image: -webkit-linear-gradient(#04acec, #ba1eaa);background-image: -o-linear-gradient(#04acec, #ba1eaa);background-image: -ms-linear-gradient(#04acec, #ba1eaa);background-image: linear-gradient(#04acec, #0186ba)height:35px; width:250px;}#menu ul.level3 {background-color: #ba1eaa;background-image: -moz-linear-gradient(#04acec, #ba1eaa);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));background-image: -webkit-linear-gradient(#04acec, #ba1eaa);background-image: -o-linear-gradient(#04acec, #ba1eaa);background-image: -ms-linear-gradient(#04acec, #ba1eaa);background-image: linear-gradient(#04acec, #0186ba)height:35px; width:250px;}#menu ul.level4 {background-color: #ba1eaa;background-image: -moz-linear-gradient(#04acec, #ba1eaa);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));background-image: -webkit-linear-gradient(#04acec, #ba1eaa);background-image: -o-linear-gradient(#04acec, #ba1eaa);background-image: -ms-linear-gradient(#04acec, #ba1eaa);background-image: linear-gradient(#04acec, #0186ba)height:35px; width:250px;}#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/#menu a {display:block; font:normal 14px Arial; color:#fff; line-height:35px; text-decoration:none;padding:0px 15px 0 15px;outline:none;}#menu ul.level1 li.level1-li a.level1-a {float:left;}#menu ul li:hover > ul {visibility:visible; left:0; top:35px;}#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px;}#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}#menu a:hover ul {left:0; top:30px;}#menu li.left a:hover ul {left:auto; right:-1px; top:30px;}#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}#menu a:hover a:hover ul,#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}#menu li.left a:hover a:hover ul,#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}#menu a:hover ul ul,#menu a:hover a:hover ul ul {left:-9999px;}#menu li.left a:hover ul ul,#menu li.left a:hover a:hover ul ul {left:-9999px;}#menu li a.fly {font-variant: small-caps;}#menu li.left ul a.fly {font-variant: small-caps;}#menu li a:hover,#menu li a.fly:hover {background-color: #ba1eaa;background-image: -moz-linear-gradient(#04acec, #ba1eaa);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));background-image: -webkit-linear-gradient(#04acec, #ba1eaa);background-image: -o-linear-gradient(#04acec, #ba1eaa);background-image: -ms-linear-gradient(#04acec, #ba1eaa);background-image: linear-gradient(#04acec, #0186ba)}#menu li:hover > a,#menu ul li:hover > a.fly {background-color: #ba1eaa;background-image: -moz-linear-gradient(#04acec, #ba1eaa);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));background-image: -webkit-linear-gradient(#04acec, #ba1eaa);background-image: -o-linear-gradient(#04acec, #ba1eaa);background-image: -ms-linear-gradient(#04acec, #ba1eaa);background-image: linear-gradient(#04acec, #0186ba)}#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}#menu ul, .tabs-outer {overflow:visible;}#menu li a {border: none;}.main-outer {z-index:10;}/*for IE*/.tabs-outer {z-index:11;}/*for IE*/ Home Contact Us Email Telephone Online Form Snail Mail Address Resort Ski Hire Facilities Main Ski Slopes Beginners Slopes Intermediate Slopes Advanced Skill Levels Local Nearby With instructor Snow boarding Expert Night Life Restaurants Snow Hotel The Snowman Ice Cavern Ski Inn Car Hire From Airport In Resort Multiple Resorts Surrounding Area Where to go What to do Places of interest National parks &amp; Museums Privacy About Us Contact Us SiteMap Official Website Information Money Exchange Resort Essential Information Lift Passes Insurance Gear Rental Boots Skis Ski Wear Goggles Ski Schools Snow Report Language Austrian German French English Short Breaks Customization:1.) Change All Blue Hash With Your Links.2.) Change All Red Text With Your Links Names.3.) Done, Now Enjoy.