"CSS3 Выпадающее Мега-меню"
Bootstrap 3.3.0 Snippet by ASDAFF

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrapper_menu"><!-- BEGIN MENU WRAPPER --> <ul class="menu menu_black"><!-- BEGIN MENU --> <li><a href="#" class="drop">Главная</a><!-- Begin Home Item --> <div class="dropdown_2columns"><!-- Begin 2 columns container --> <div class="col_2 firstcolumn"> <h2>Welcome !</h2> <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p> <p>This item comes with a large range of prepared typographic stylings such as headings, lists, <a href="#">links</a> etc.</p> <h2 class="pusher">Cross Browser Support</h2> <div class="col_1 firstcolumn"> <img src="http://storage3.static.itmages.ru/i/15/0627/h_1435423391_6149348_e608c18c2c.png" width="125" height="46" alt="" /> </div> <div class="col_1"> <p>This mega menu has been tested in all major browsers.</p> </div> <h2 class="pusher">Compatible Browsers</h2> <div class="col_1 firstcolumn"> <ul class="plus"> <li>Internet Explorer</li> <li>Firefox</li> <li>Opera</li> </ul> </div> <div class="col_1"> <ul class="plus"> <li>Chrome</li> <li>Safari</li> <li>What else ?</li> </ul> </div> </div> </div><!-- End 2 columns container --> </li><!-- End Home Item --> <li><a href="#" class="drop">5 колонок</a><!-- Begin 5 columns Item --> <div class="dropdown_5columns"><!-- Begin 5 columns container --> <div class="col_5 firstcolumn"> <h2>This is an example of a large container with 5 columns</h2> <div class="col_1 firstcolumn"> <p class="dark_grey_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> </div> <div class="col_1"> <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> </div> <div class="col_1"> <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> </div> <div class="col_1"> <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> </div> <div class="col_1"> <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> </div> </div> <div class="col_5 firstcolumn"> <h2>Here is some content with side images</h2> <div class="col_3 firstcolumn"> <img src="http://storage3.static.itmages.ru/i/15/0627/h_1435423478_8160140_e5c4372a97.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" /> <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<br /><a href="#">Read more...</a></p> <img src="http://storage1.static.itmages.ru/i/15/0627/h_1435423521_7065673_f3ad0b970e.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" /> <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<br /><a href="#">Read more...</a></p> </div> <div class="col_2"> <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p> </div> </div> </div><!-- End 5 columns container --> </li><!-- End 5 columns Item --> <li><a href="#" class="drop">4 колонки</a><!-- Begin 4 columns Item --> <div class="dropdown_4columns"><!-- Begin 4 columns container --> <div class="col_4 firstcolumn"> <h2>This is a heading title</h2> <div class="col_2 firstcolumn"> <p class="favorite">This is a paragraph with a favorite icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p> <p class="help">This is a paragraph with a help icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p> </div> <div class="col_2"> <p class="mail">This is a paragraph with a mail icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p> <p class="print">This is a paragraph with a print icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p> </div> </div> <div class="col_1 firstcolumn"> <h3>Some Links</h3> <ul> <li><a href="#">ThemeForest</a></li> <li><a href="#">GraphicRiver</a></li> <li><a href="#">ActiveDen</a></li> <li><a href="#">VideoHive</a></li> <li><a href="#">3DOcean</a></li> </ul> </div> <div class="col_1"> <h3>Useful Links</h3> <ul> <li><a href="#">NetTuts</a></li> <li><a href="#">VectorTuts</a></li> <li><a href="#">PsdTuts</a></li> <li><a href="#">PhotoTuts</a></li> <li><a href="#">ActiveTuts</a></li> </ul> </div> <div class="col_1"> <h3>Other Stuff</h3> <ul> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> </ul> </div> <div class="col_1"> <h3>Misc</h3> <ul> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div><!-- End 4 columns container --> </li><!-- End 4 columns Item --> <li><a href="#" class="drop">3 колонки</a><!-- Begin 3 columns Item --> <div class="dropdown_3columns"><!-- Begin 3 columns container --> <div class="col_3 firstcolumn"> <h2>Lists in Boxes</h2> <div class="col_1 firstcolumn"> <ul class="greybox"> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">ThemeForest</a></li> <li><a href="#">GraphicRiver</a></li> <li><a href="#">ActiveDen</a></li> <li><a href="#">VideoHive</a></li> <li><a href="#">3DOcean</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div> <div class="col_3 firstcolumn"> <h2 class="pusher">Here are some image examples</h2> <img src="http://storage1.static.itmages.ru/i/15/0627/h_1435423641_8919769_56cf6ba641.jpg" width="70" height="70" class="img_right imgshadow_light" alt="" /> <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<br /><a href="#">Read more...</a></p> <img src="http://storage2.static.itmages.ru/i/15/0627/h_1435423663_8610129_c38636a135.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" /> <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada.<br /><a href="#">Read more...</a></p> </div> </div><!-- End 3 columns container --> </li><!-- End 3 columns Item --> <li><a href="#" class="drop">2 колонки</a><!-- Begin 2 columns Item --> <div class="dropdown_2columns"><!-- Begin 2 columns container --> <div class="col_1 firstcolumn"> <h3>Some Links</h3> <ul> <li><a href="#">ThemeForest</a></li> <li><a href="#">GraphicRiver</a></li> <li><a href="#">ActiveDen</a></li> <li><a href="#">VideoHive</a></li> <li><a href="#">3DOcean</a></li> </ul> </div> <div class="col_1"> <h3>Useful Links</h3> <ul> <li><a href="#">NetTuts</a></li> <li><a href="#">VectorTuts</a></li> <li><a href="#">PsdTuts</a></li> <li><a href="#">PhotoTuts</a></li> <li><a href="#">ActiveTuts</a></li> </ul> </div> <div class="col_1 firstcolumn"> <h3>Other Stuff</h3> <ul> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> </ul> </div> <div class="col_1"> <h3>Misc</h3> <ul> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div><!-- End 2 columns container --> </li><!-- End 2 columns Item --> <li><a href="#" class="drop">Drop Down</a><!-- Begin 1 column Item --> <div class="dropdown_1column"><!-- Begin 1 column container --> <div class="col_1 firstcolumn"> <ul class="levels"> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#" class="parent">Creattica</a> <ul> <li><a href="#">This is a</a></li> <li><a href="#">Second Level</a></li> <li><a href="#">Submenu</a></li> </ul> </li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#" class="parent">Web Apps</a> <ul> <li><a href="#">Another</a></li> <li><a href="#" class="parent">Drop Down</a> <ul> <li><a href="#">This is a</a></li> <li><a href="#">Second</a></li> <li><a href="#">Level</a></li> <li><a href="#">Submenu</a></li> </ul> </li> <li><a href="#">Menu</a></li> </ul> </li> <li><a href="#">NetTuts</a></li> <li><a href="#" class="parent">VectorTuts</a> <ul> <li><a href="#">Put anything</a></li> <li><a href="#">You want</a></li> <li><a href="#" class="parent">Here</a> <ul> <li><a href="#">Unlimited</a></li> <li><a href="#">Possibilities</a></li> <li><a href="#">With this</a></li> <li><a href="#">Mega Menu</a></li> </ul> </li> </ul> </li> <li><a href="#">PsdTuts</a></li> <li><a href="#">PhotoTuts</a></li> <li><a href="#">ActiveTuts</a></li> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div><!-- End 1 column container --> </li><!-- End 1 column Item --> <li class="nodrop"><a href="#">No Drop</a></li><!-- No Drop Down Item --> <li class="right"><a href="#" class="drop">Contact</a><!-- Begin Contact Item --> <div class="dropdown_2columns align_right"><!-- Begin right aligned container --> <div class="col_2 firstcolumn"> <h2>Связаться с нами</h2> <p>Please fill in the following form to contact us</p> <div id="contact_form"> <div class="message"> <div id="alert"></div> </div> <form method="post" action="form/sendmail.php" id="contactForm"> <label for="name">Name<span class="required"> *</span></label> <input name="name" type="text" id="name" size="30" value="" autocomplete="off" /> <br /> <label for="email">Email<span class="required"> *</span></label> <input name="email" type="text" id="email" size="30" value="" autocomplete="off" /> <br /> <label for="message">Message<span class="required"> *</span></label> <textarea name="message" cols="40" rows="3" id="message"></textarea> <p class="special"><label for="last">Don't fill this in :</label><input type="text" name="last" value="" id="last" /></p> <div class="form_buttons"> <input type="submit" class="button" id="submit" value="Submit" /> <input type="reset" class="button" id="reset" value="Reset" /> </div> </form> </div> </div> <div class="col_2 firstcolumn"> <h2>Find us on social networks</h2> <ul class="social"> <li><a href="#"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li> <li><a href="#"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li> <li><a href="#"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li> <li><a href="#"><img src='img/rss.png' alt="" /><span>RSS Feed</span></a></li> <li><a href="#"><img src='img/technorati.png' alt="" /><span>Technorati</span></a></li> <li><a href="#"><img src='img/delicious.png' alt="" /><span>Delicious</span></a></li> </ul> </div> </div><!-- End right aligned container --> </li><!-- End Contact Item --> </ul><!-- END MENU --> </div><!-- END MENU WRAPPER -->
/* Item Name : CSS3 Mega Drop Down Menu Author URI : http://codecanyon.net/user/Pixelworkshop/ Item URI : http://codecanyon.net/item/css3-mega-drop-down-menu/126387 Version : 4.0 */ /* TABLE OF CONTENTS 01 MENU BAR 02 DROP DOWN MENU 03 CONTENT STYLING 04 CONTACT FORM 05 COLORS */ /* _______________________________________ 01 MENU BAR _______________________________________ */ #wrapper_menu { width: 980px; margin:0 auto; display:block; position: relative; z-index:9999; } #wrapper_menu .menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #wrapper_menu_full { width: 100%; margin:0; display:block; position: relative; z-index:9999; } #wrapper_menu_full .menu { list-style:none; width:940px; margin:0px auto 0px auto; height:43px; padding:0px 20px 0px 20px; } .menu li { float:left; text-align:center; position:relative; margin-right:20px; margin-top:6px; border:none; } .menu li.fullwidth { position: static !important; } .menu li:hover { background:#161616; border:1px solid #000000; border-bottom:none; margin-right:19px; background: -moz-linear-gradient(top, #212121, #161616); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#212121), to(#161616)); background: -o-linear-gradient(top, #212121, #161616); -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .menu li.nodrop:hover { background:#161616; border:1px solid #000000; padding: 4px 10px 4px 9px; background: -moz-linear-gradient(top, #212121, #161616); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#212121), to(#161616)); background: -o-linear-gradient(top, #212121, #161616); -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li.nodrop:hover a { padding: 0px; } .menu li a { color: #EEEEEE; outline:0; padding: 5px 10px 3px 10px; text-decoration:none; display:block; text-shadow: 1px 1px 1px #000; } .menu li:hover a { color:#ffffff; text-shadow: none; position:relative; z-index:11; border-bottom:1px solid #161616; padding: 4px 9px 4px 9px; } .menu li:hover div a { display:inline; } .menu li .drop { padding-right:27px; background:url("img/drop_dark.png") no-repeat right 13px; } .menu li:hover .drop { padding-right:27px; background:url("img/drop_dark.png") no-repeat right 12px; } /* Right aligned menu item */ .menu .right { float:right; right:0; margin-right:0px; } .menu li.right:hover { margin-right:-1px; } /* _______________________________________ 02 DROP DOWN MENU _______________________________________ */ /* Left & right aligned common styles */ .menu .dropdown_1column, .menu .dropdown_2columns, .menu .dropdown_3columns, .menu .dropdown_4columns, .menu .dropdown_5columns, .menu .dropdown_fullwidth { margin:4px auto; left:-999em; position:absolute; background:#161616; border:1px solid #000000; padding:10px; text-align:left; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; -khtml-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; background: -moz-linear-gradient(top, #161616, #0A0A0A); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#0A0A0A)); background: -o-linear-gradient(top, #161616, #0A0A0A); } /* Drop Downs Sizes */ .menu .dropdown_1column {width: 145px;} .menu .dropdown_2columns {width: 300px;} .menu .dropdown_3columns {width: 455px;} .menu .dropdown_4columns {width: 610px;} .menu .dropdown_5columns {width: 765px;} .menu .dropdown_fullwidth { width: 920px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; } .menu li .first_fullwidth { -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } /* Showing Drop Down on Mouse Hover - Left aligned */ .menu li:hover .dropdown_1column, .menu li:hover .dropdown_2columns, .menu li:hover .dropdown_3columns, .menu li:hover .dropdown_4columns, .menu li:hover .dropdown_5columns { left:-1px; top:25px; } .menu li:hover .dropdown_fullwidth { left:21px; top:33px; display: block; } #wrapper_menu_full .menu li:hover .dropdown_fullwidth { left:50%; margin-left:-470px; top:32px; display: block; } /* Showing Drop Down on Mouse Hover - Right aligned */ .menu li .align_right { /* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; } .menu li:hover .align_right { left:auto; right:-1px; top:25px; } .menu li.right:hover .dropdown_fullwidth { right:18px; top:33px; } /* Columns Sizes */ .menu .col_1, .menu .col_2, .menu .col_3, .menu .col_4, .menu .col_5, .menu .col_6 { display:inline; float: left; position: relative; margin-left: 10px; } .menu .col_1 {width:145px;} .menu .col_2 {width:300px;} .menu .col_3 {width:455px;} .menu .col_4 {width:610px;} .menu .col_5 {width:765px;} .menu .col_6 {width:920px;} /* IMPORTANT */ /* Use the firstcolumn class for the items that stick to the left edge of the dropdown */ .menu .firstcolumn { margin-left: 0; /* Clearing margin & left */ clear: left; } /* _______________________________________ 03 CONTENT STYLING _______________________________________ */ .menu p, .menu ul, .menu li, .menu h2, .menu h3 { color:#ffffff; font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } .menu p { font-size:12px; line-height:18px; margin:0; margin-bottom:10px; text-shadow:1px 1px #000000; } .menu .strong { font-weight:bold; } .menu .italic { font-style:italic; } .menu h2, .menu h3 { text-shadow:1px 1px #000000; border-bottom:1px solid #333333; margin-top:7px; } .menu h2 { font-weight:400; font-size:21px; margin-bottom:18px; padding-bottom:11px; } .menu h3 { font-weight:600; font-size:14px; margin-bottom:14px; padding-bottom:7px; } .menu li:hover div a { text-decoration:none; text-shadow:none; border:none; padding:0; } .menu .pusher { /* Use this pucher if you want to give more vertical spacing between your rows of content */ margin-top:18px; } /* Icon paragraphs */ .menu .help, .menu .favorite, .menu .mail, .menu .print { padding-left:36px; margin-bottom:18px; } .menu .help {background:url("img/help.png") no-repeat 0px 2px;} .menu .favorite {background:url("img/favorite.png") no-repeat 0px 2px;} .menu .mail {background:url("img/mail.png") no-repeat 0px 2px;} .menu .print {background:url("img/print.png") no-repeat 0px 2px;} /* Images styles */ .menu .imgshadow_dark { /* Better style on dark background */ background:#FFFFFF; padding:4px; border:1px solid #333333; margin-top:5px; -moz-box-shadow:0px 0px 5px #000000; -webkit-box-shadow:0px 0px 5px #000000; box-shadow:0px 0px 5px #000000; } .menu .imgshadow_light { /* Better style on light background */ background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #000000; -webkit-box-shadow:0px 0px 5px #000000; box-shadow:0px 0px 5px #000000; } .menu .img_left { /* Image sticks to the left */ width:auto; float:left; margin:2px 15px 5px 0px; } .menu .img_right { /* Image sticks to the right */ width:auto; float:right; margin:2px 0px 5px 15px; } /* Box styles */ .menu li .black_box, .menu li .dark_grey_box { color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background-color:#0A0A0A; -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } /* Standard lists styles */ .menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } .menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #000000; padding:0; margin:0; float:left; text-align:left; width:145px; } .menu li ul li a { padding:0; } .menu li ul li:hover { background:none; border:none; padding:0; margin:0; } /* Greybox lists styles */ .menu li .greybox li { background:#0A0A0A; border:1px solid #000000; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:131px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li .greybox li:hover { background:#141414; border:1px solid #111111; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } /* Other lists styles */ .menu li .plus li { background: url("img/plus_dark.png") left 6px no-repeat; margin:0px 0px 4px 0px; padding:0px 0px 0px 21px; width:109px; } .menu li .plus li:hover { background: url("img/plus_dark.png") left 6px no-repeat; padding:0px 0px 0px 21px; margin:0px 0px 4px 0px; } /* Social Icons */ .menu li ul.social { list-style:none; margin:0; padding:0; } .menu li ul.social li { padding-top:5px; margin:0 12px 12px 0; float:left; position:relative; display:inline; width:32px; } .menu li ul.social li img { border:none; } .menu li ul.social li:hover { padding-top:5px; margin:-1px 12px 12px 0; } .menu li ul.social li span { display:none; } /* 2-Levels Drop Down */ .menu .levels, .menu .levels ul { /* all lists */ padding: 0; margin: 0; list-style: none; } .menu li:hover .levels a { display:block; } .menu .levels a { display: block; width: 10em; } .menu .levels a.parent, .menu .levels a.parent:hover { background: url("img/drop2_dark.png") right center no-repeat; } .menu .levels li { float: left; width:150px; } .menu .levels li ul { /* second-level lists */ position: absolute; background:#161616; border:1px solid #000000; top:-23px; margin:15px 0px 0px 4px; padding:6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background: -moz-linear-gradient(top, #161616, #0A0A0A); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#0A0A0A)); background: -o-linear-gradient(top, #161616, #0A0A0A); left: -999em; } .menu .levels li ul ul { top:-23px; } .menu .levels li:hover ul ul, .menu .levels li:hover ul ul ul { left: -999em; } .menu .levels li:hover ul, .menu .levels li li:hover ul, .menu .levels li li li:hover ul { left: 142px; } /* _______________________________________ 04 CONTACT FORM _______________________________________ */ #contact_form label, legend { font-size: 12px; font-family:Arial, Helvetica, sans-serif; } #contact_form legend { margin-bottom:10px; } #contact_form { display: block; margin-bottom:10px; } #contact_form label { display: inline-block; float: left; height: 36px; line-height: 36px; width:80px; font-size:12px; } #contact_form input, textarea, select { font-family:Arial, Helvetica, sans-serif; font-size:12px; width:200px; padding: 5px; color: #FFFFFF; background-color:#222222; border:1px solid #0A0A0A; margin: 7px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } #contact_form textarea { resize:none; } #contact_form input:focus, textarea:focus, select:focus { box-shadow: rgba(0,0,0, 0.7) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.7) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.7) 0px 0px 8px; border:1px solid #333333; } #contact_form input:hover, textarea:hover, select:hover { box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px; } #contact_form .required { color:#C00; } #contact_form .form_buttons { margin:4px 0 0 80px; } #contact_form input.button { width: 80px; margin-right:10px; cursor: pointer; background-color:#1E1E1E; border:1px solid #0A0A0A; color:#cccccc; padding: 4px 7px 4px 7px; } #contact_form input.button:hover { color:#eeeeee; background-color:#222222; border:1px solid #000000; } #contact_form .special { display:none; } #contact_form .error, #contact_form .sent { font-size:11px; padding:2px 5px 2px 5px; text-shadow:none; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius: 3px; } #contact_form .error { background:#FBE5E2; border:#F2A197 solid 1px; color:#992213; } #contact_form .sent { background:#E1F8CB; border:#C6D880 solid 1px; color:#37620d; } /* _______________________________________ 05 COLORS _______________________________________ */ /* Black */ .menu_black { background: #333; background: -moz-linear-gradient(top, #555, #2a2a2a); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#2a2a2a)); background: -o-linear-gradient(top, #555, #2a2a2a); } #wrapper_menu .menu_black { border: 1px solid #444; border-top: 1px solid #777; } #wrapper_menu_full .menu_black { border-bottom: 1px solid #444; } .menu_black li:hover div a { color:#CCC; } .menu_black li:hover div a:hover { color:#EEE; } .menu_black li ul li a:hover { color:#EEE; } /* Blue */ .menu_blue { background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); background: -o-linear-gradient(top, #0272a7, #013953); } #wrapper_menu .menu_blue { border: 1px solid #015b86; border-top: 1px solid #029feb; } #wrapper_menu_full .menu_blue { border-bottom: 1px solid #015b86; } .menu_blue li:hover div a { color:#0294da; } .menu_blue li:hover div a:hover { color:#33bcfd; } .menu_blue li ul li a:hover { color:#33bcfd; } /* Brown */ .menu_brown { background: #44391e; background: -moz-linear-gradient(top, #736033, #382f19); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#736033), to(#382f19)); background: -o-linear-gradient(top, #736033, #382f19); } #wrapper_menu .menu_brown { border: 1px solid #5c4c29; border-top: 1px solid #a28748; } #wrapper_menu_full .menu_brown { border-bottom: 1px solid #5c4c29; } .menu_brown li:hover div a { color:#8b733e; } .menu_brown li:hover div a:hover { color:#bfa670; } .menu_brown li ul li a:hover { color:#bfa670; } /* Green */ .menu_green { background: #3e5718; background: -moz-linear-gradient(top, #658c26, #354914); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#658c26), to(#354914)); background: -o-linear-gradient(top, #658c26, #354914); } #wrapper_menu .menu_green { border: 1px solid #52711f; border-top: 1px solid #8bc135; } #wrapper_menu_full .menu_green { border-bottom: 1px solid #52711f; } .menu_green li:hover div a { color:#6f992a; } .menu_green li:hover div a:hover { color:#a3d158; } .menu_green li ul li a:hover { color:#a3d158; } /* Light Blue */ .menu_lightblue { background: #52786b; background: -moz-linear-gradient(top, #709e8e, #52786b); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#709e8e), to(#52786b)); background: -o-linear-gradient(top, #709e8e, #52786b); } #wrapper_menu .menu_lightblue { border: 1px solid #608c7d; border-top: 1px solid #99b9ae; } #wrapper_menu_full .menu_lightblue { border-bottom: 1px solid #608c7d; } .menu_lightblue li:hover div a { color:#608c7d; } .menu_lightblue li:hover div a:hover { color:#99b9ae; } .menu_lightblue li ul li a:hover { color:#99b9ae; } /* Orange */ .menu_orange { background: #d24900; background: -moz-linear-gradient(top, #ff6717, #c14300); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6717), to(#c14300)); background: -o-linear-gradient(top, #ff6717, #c14300); } #wrapper_menu .menu_orange { border: 1px solid #f45500; border-top: 1px solid #ff945b; } #wrapper_menu_full .menu_orange { border-bottom: 1px solid #f45500; } .menu_orange li:hover div a { color:#f45500; } .menu_orange li:hover div a:hover { color:#ff945b; } .menu_orange li ul li a:hover { color:#ff945b; } /* Pink */ .menu_pink { background: #910045; background: -moz-linear-gradient(top, #d50066, #80003d); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d50066), to(#80003d)); background: -o-linear-gradient(top, #d50066, #80003d); } #wrapper_menu .menu_pink { border: 1px solid #b30055; border-top: 1px solid #ff1a87; } #wrapper_menu_full .menu_pink { border-bottom: 1px solid #b30055; } .menu_pink li:hover div a { color:#e6006d; } .menu_pink li:hover div a:hover { color:#ff4da1; } .menu_pink li ul li a:hover { color:#ff4da1; } /* Purple */ .menu_purple { background: #6a5f71; background: -moz-linear-gradient(top, #8c8094, #615867); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8c8094), to(#615867)); background: -o-linear-gradient(top, #8c8094, #615867); } #wrapper_menu .menu_purple { border: 1px solid #7b6f83; border-top: 1px solid #ada5b3; } #wrapper_menu_full .menu_purple { border-bottom: 1px solid #7b6f83; } .menu_purple li:hover div a { color:#7b6f83; } .menu_purple li:hover div a:hover { color:#ada5b3; } .menu_purple li ul li a:hover { color:#ada5b3; } /* Red */ .menu_red { background: #830701; background: -moz-linear-gradient(top, #d70b02, #830701); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); background: -o-linear-gradient(top, #d70b02, #830701); } #wrapper_menu .menu_red { border: 1px solid #a40802; border-top: 1px solid #fd190f; } #wrapper_menu_full .menu_red { border-bottom: 1px solid #a40802; } .menu_red li:hover div a { color:#d60a03; } .menu_red li:hover div a:hover { color:#fd5953; } .menu_red li ul li a:hover { color:#fd5953; }
/*! * jQuery Form Plugin * version: 2.83 (11-JUL-2011) * @requires jQuery v1.3.2 or later * * Examples and documentation at: http://malsup.com/jquery/form/ * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ (function(a){function b(){var a="[jquery.form] "+Array.prototype.join.call(arguments,"");if(window.console&&window.console.log){window.console.log(a)}else if(window.opera&&window.opera.postError){window.opera.postError(a)}}a.fn.ajaxSubmit=function(c){function t(e){function C(c){if(o.aborted||B){return}try{z=w(n)}catch(d){b("cannot access response document: ",d);c=v}if(c===u&&o){o.abort("timeout");return}else if(c==v&&o){o.abort("server abort");return}if(!z||z.location.href==j.iframeSrc){if(!r)return}n.detachEvent?n.detachEvent("onload",C):n.removeEventListener("load",C,false);var e="success",f;try{if(r){throw"timeout"}var g=j.dataType=="xml"||z.XMLDocument||a.isXMLDoc(z);b("isXml="+g);if(!g&&window.opera&&(z.body==null||z.body.innerHTML=="")){if(--A){b("requeing onLoad callback, DOM not available");setTimeout(C,250);return}}var h=z.body?z.body:z.documentElement;o.responseText=h?h.innerHTML:null;o.responseXML=z.XMLDocument?z.XMLDocument:z;if(g)j.dataType="xml";o.getResponseHeader=function(a){var b={"content-type":j.dataType};return b[a]};if(h){o.status=Number(h.getAttribute("status"))||o.status;o.statusText=h.getAttribute("statusText")||o.statusText}var i=j.dataType||"";var l=/(json|script|text)/.test(i.toLowerCase());if(l||j.textarea){var p=z.getElementsByTagName("textarea")[0];if(p){o.responseText=p.value;o.status=Number(p.getAttribute("status"))||o.status;o.statusText=p.getAttribute("statusText")||o.statusText}else if(l){var q=z.getElementsByTagName("pre")[0];var t=z.getElementsByTagName("body")[0];if(q){o.responseText=q.textContent?q.textContent:q.innerHTML}else if(t){o.responseText=t.innerHTML}}}else if(j.dataType=="xml"&&!o.responseXML&&o.responseText!=null){o.responseXML=D(o.responseText)}try{y=F(o,j.dataType,j)}catch(c){e="parsererror";o.error=f=c||e}}catch(c){b("error caught: ",c);e="error";o.error=f=c||e}if(o.aborted){b("upload aborted");e=null}if(o.status){e=o.status>=200&&o.status<300||o.status===304?"success":"error"}if(e==="success"){j.success&&j.success.call(j.context,y,"success",o);k&&a.event.trigger("ajaxSuccess",[o,j])}else if(e){if(f==undefined)f=o.statusText;j.error&&j.error.call(j.context,o,e,f);k&&a.event.trigger("ajaxError",[o,j,f])}k&&a.event.trigger("ajaxComplete",[o,j]);if(k&&!--a.active){a.event.trigger("ajaxStop")}j.complete&&j.complete.call(j.context,o,e);B=true;if(j.timeout)clearTimeout(s);setTimeout(function(){if(!j.iframeTarget)m.remove();o.responseXML=null},100)}function x(){function h(){try{var a=w(n).readyState;b("state = "+a);if(a.toLowerCase()=="uninitialized")setTimeout(h,50)}catch(c){b("Server abort: ",c," (",c.name,")");C(v);s&&clearTimeout(s);s=undefined}}var c=g.attr("target"),e=g.attr("action");f.setAttribute("target",l);if(!d){f.setAttribute("method","POST")}if(e!=j.url){f.setAttribute("action",j.url)}if(!j.skipEncodingOverride&&(!d||/post/i.test(d))){g.attr({encoding:"multipart/form-data",enctype:"multipart/form-data"})}if(j.timeout){s=setTimeout(function(){r=true;C(u)},j.timeout)}var i=[];try{if(j.extraData){for(var k in j.extraData){i.push(a('<input type="hidden" name="'+k+'" />').attr("value",j.extraData[k]).appendTo(f)[0])}}if(!j.iframeTarget){m.appendTo("body");n.attachEvent?n.attachEvent("onload",C):n.addEventListener("load",C,false)}setTimeout(h,15);f.submit()}finally{f.setAttribute("action",e);if(c){f.setAttribute("target",c)}else{g.removeAttr("target")}a(i).remove()}}function w(a){var b=a.contentWindow?a.contentWindow.document:a.contentDocument?a.contentDocument:a.document;return b}var f=g[0],h,i,j,k,l,m,n,o,p,q,r,s;var t=!!a.fn.prop;if(e){for(i=0;i<e.length;i++){h=a(f[e[i].name]);h[t?"prop":"attr"]("disabled",false)}}if(a(":input[name=submit],:input[id=submit]",f).length){alert('Error: Form elements must not have name or id of "submit".');return}j=a.extend(true,{},a.ajaxSettings,c);j.context=j.context||j;l="jqFormIO"+(new Date).getTime();if(j.iframeTarget){m=a(j.iframeTarget);q=m.attr("name");if(q==null)m.attr("name",l);else l=q}else{m=a('<iframe name="'+l+'" src="'+j.iframeSrc+'" />');m.css({position:"absolute",top:"-1000px",left:"-1000px"})}n=m[0];o={aborted:0,responseText:null,responseXML:null,status:0,statusText:"n/a",getAllResponseHeaders:function(){},getResponseHeader:function(){},setRequestHeader:function(){},abort:function(c){var d=c==="timeout"?"timeout":"aborted";b("aborting upload... "+d);this.aborted=1;m.attr("src",j.iframeSrc);o.error=d;j.error&&j.error.call(j.context,o,d,c);k&&a.event.trigger("ajaxError",[o,j,d]);j.complete&&j.complete.call(j.context,o,d)}};k=j.global;if(k&&!(a.active++)){a.event.trigger("ajaxStart")}if(k){a.event.trigger("ajaxSend",[o,j])}if(j.beforeSend&&j.beforeSend.call(j.context,o,j)===false){if(j.global){a.active--}return}if(o.aborted){return}p=f.clk;if(p){q=p.name;if(q&&!p.disabled){j.extraData=j.extraData||{};j.extraData[q]=p.value;if(p.type=="image"){j.extraData[q+".x"]=f.clk_x;j.extraData[q+".y"]=f.clk_y}}}var u=1;var v=2;if(j.forceSync){x()}else{setTimeout(x,10)}var y,z,A=50,B;var D=a.parseXML||function(a,b){if(window.ActiveXObject){b=new ActiveXObject("Microsoft.XMLDOM");b.async="false";b.loadXML(a)}else{b=(new DOMParser).parseFromString(a,"text/xml")}return b&&b.documentElement&&b.documentElement.nodeName!="parsererror"?b:null};var E=a.parseJSON||function(a){return window["eval"]("("+a+")")};var F=function(b,c,d){var e=b.getResponseHeader("content-type")||"",f=c==="xml"||!c&&e.indexOf("xml")>=0,g=f?b.responseXML:b.responseText;if(f&&g.documentElement.nodeName==="parsererror"){a.error&&a.error("parsererror")}if(d&&d.dataFilter){g=d.dataFilter(g,c)}if(typeof g==="string"){if(c==="json"||!c&&e.indexOf("json")>=0){g=E(g)}else if(c==="script"||!c&&e.indexOf("javascript")>=0){a.globalEval(g)}}return g}}if(!this.length){b("ajaxSubmit: skipping submit process - no element selected");return this}var d,e,f,g=this;if(typeof c=="function"){c={success:c}}d=this.attr("method");e=this.attr("action");f=typeof e==="string"?a.trim(e):"";f=f||window.location.href||"";if(f){f=(f.match(/^([^#]+)/)||[])[1]}c=a.extend(true,{url:f,success:a.ajaxSettings.success,type:d||"GET",iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank"},c);var h={};this.trigger("form-pre-serialize",[this,c,h]);if(h.veto){b("ajaxSubmit: submit vetoed via form-pre-serialize trigger");return this}if(c.beforeSerialize&&c.beforeSerialize(this,c)===false){b("ajaxSubmit: submit aborted via beforeSerialize callback");return this}var i,j,k=this.formToArray(c.semantic);if(c.data){c.extraData=c.data;for(i in c.data){if(c.data[i]instanceof Array){for(var l in c.data[i]){k.push({name:i,value:c.data[i][l]})}}else{j=c.data[i];j=a.isFunction(j)?j():j;k.push({name:i,value:j})}}}if(c.beforeSubmit&&c.beforeSubmit(k,this,c)===false){b("ajaxSubmit: submit aborted via beforeSubmit callback");return this}this.trigger("form-submit-validate",[k,this,c,h]);if(h.veto){b("ajaxSubmit: submit vetoed via form-submit-validate trigger");return this}var m=a.param(k);if(c.type.toUpperCase()=="GET"){c.url+=(c.url.indexOf("?")>=0?"&":"?")+m;c.data=null}else{c.data=m}var n=[];if(c.resetForm){n.push(function(){g.resetForm()})}if(c.clearForm){n.push(function(){g.clearForm()})}if(!c.dataType&&c.target){var o=c.success||function(){};n.push(function(b){var d=c.replaceTarget?"replaceWith":"html";a(c.target)[d](b).each(o,arguments)})}else if(c.success){n.push(c.success)}c.success=function(a,b,d){var e=c.context||c;for(var f=0,h=n.length;f<h;f++){n[f].apply(e,[a,b,d||g,g])}};var p=a("input:file",this).length>0;var q="multipart/form-data";var r=g.attr("enctype")==q||g.attr("encoding")==q;if(c.iframe!==false&&(p||c.iframe||r)){if(c.closeKeepAlive){a.get(c.closeKeepAlive,function(){t(k)})}else{t(k)}}else{if(a.browser.msie&&d=="get"){var s=g[0].getAttribute("method");if(typeof s==="string")c.type=s}a.ajax(c)}this.trigger("form-submit-notify",[this,c]);return this};a.fn.ajaxForm=function(c){if(this.length===0){var d={s:this.selector,c:this.context};if(!a.isReady&&d.s){b("DOM not ready, queuing ajaxForm");a(function(){a(d.s,d.c).ajaxForm(c)});return this}b("terminating; zero elements found by selector"+(a.isReady?"":" (DOM not ready)"));return this}return this.ajaxFormUnbind().bind("submit.form-plugin",function(b){if(!b.isDefaultPrevented()){b.preventDefault();a(this).ajaxSubmit(c)}}).bind("click.form-plugin",function(b){var c=b.target;var d=a(c);if(!d.is(":submit,input:image")){var e=d.closest(":submit");if(e.length==0){return}c=e[0]}var f=this;f.clk=c;if(c.type=="image"){if(b.offsetX!=undefined){f.clk_x=b.offsetX;f.clk_y=b.offsetY}else if(typeof a.fn.offset=="function"){var g=d.offset();f.clk_x=b.pageX-g.left;f.clk_y=b.pageY-g.top}else{f.clk_x=b.pageX-c.offsetLeft;f.clk_y=b.pageY-c.offsetTop}}setTimeout(function(){f.clk=f.clk_x=f.clk_y=null},100)})};a.fn.ajaxFormUnbind=function(){return this.unbind("submit.form-plugin click.form-plugin")};a.fn.formToArray=function(b){var c=[];if(this.length===0){return c}var d=this[0];var e=b?d.getElementsByTagName("*"):d.elements;if(!e){return c}var f,g,h,i,j,k,l;for(f=0,k=e.length;f<k;f++){j=e[f];h=j.name;if(!h){continue}if(b&&d.clk&&j.type=="image"){if(!j.disabled&&d.clk==j){c.push({name:h,value:a(j).val()});c.push({name:h+".x",value:d.clk_x},{name:h+".y",value:d.clk_y})}continue}i=a.fieldValue(j,true);if(i&&i.constructor==Array){for(g=0,l=i.length;g<l;g++){c.push({name:h,value:i[g]})}}else if(i!==null&&typeof i!="undefined"){c.push({name:h,value:i})}}if(!b&&d.clk){var m=a(d.clk),n=m[0];h=n.name;if(h&&!n.disabled&&n.type=="image"){c.push({name:h,value:m.val()});c.push({name:h+".x",value:d.clk_x},{name:h+".y",value:d.clk_y})}}return c};a.fn.formSerialize=function(b){return a.param(this.formToArray(b))};a.fn.fieldSerialize=function(b){var c=[];this.each(function(){var d=this.name;if(!d){return}var e=a.fieldValue(this,b);if(e&&e.constructor==Array){for(var f=0,g=e.length;f<g;f++){c.push({name:d,value:e[f]})}}else if(e!==null&&typeof e!="undefined"){c.push({name:this.name,value:e})}});return a.param(c)};a.fn.fieldValue=function(b){for(var c=[],d=0,e=this.length;d<e;d++){var f=this[d];var g=a.fieldValue(f,b);if(g===null||typeof g=="undefined"||g.constructor==Array&&!g.length){continue}g.constructor==Array?a.merge(c,g):c.push(g)}return c};a.fieldValue=function(b,c){var d=b.name,e=b.type,f=b.tagName.toLowerCase();if(c===undefined){c=true}if(c&&(!d||b.disabled||e=="reset"||e=="button"||(e=="checkbox"||e=="radio")&&!b.checked||(e=="submit"||e=="image")&&b.form&&b.form.clk!=b||f=="select"&&b.selectedIndex==-1)){return null}if(f=="select"){var g=b.selectedIndex;if(g<0){return null}var h=[],i=b.options;var j=e=="select-one";var k=j?g+1:i.length;for(var l=j?g:0;l<k;l++){var m=i[l];if(m.selected){var n=m.value;if(!n){n=m.attributes&&m.attributes["value"]&&!m.attributes["value"].specified?m.text:m.value}if(j){return n}h.push(n)}}return h}return a(b).val()};a.fn.clearForm=function(){return this.each(function(){a("input,select,textarea",this).clearFields()})};a.fn.clearFields=a.fn.clearInputs=function(){var a=/^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i;return this.each(function(){var b=this.type,c=this.tagName.toLowerCase();if(a.test(b)||c=="textarea"){this.value=""}else if(b=="checkbox"||b=="radio"){this.checked=false}else if(c=="select"){this.selectedIndex=-1}})};a.fn.resetForm=function(){return this.each(function(){if(typeof this.reset=="function"||typeof this.reset=="object"&&!this.reset.nodeType){this.reset()}})};a.fn.enable=function(a){if(a===undefined){a=true}return this.each(function(){this.disabled=!a})};a.fn.selected=function(b){if(b===undefined){b=true}return this.each(function(){var c=this.type;if(c=="checkbox"||c=="radio"){this.checked=b}else if(this.tagName.toLowerCase()=="option"){var d=a(this).parent("select");if(b&&d[0]&&d[0].type=="select-one"){d.find("option").selected(false)}this.selected=b}})};})(jQuery) $(document).ready(function() { var options = {target:'#alert'}; $('#contactForm').ajaxForm(options); }); $.fn.clearForm = function() { return this.each(function() { var type = this.type, tag = this.tagName.toLowerCase(); if (tag == 'form') return $(':input',this).clearForm(); if (type == 'text' || type == 'password' || tag == 'textarea') this.value = ''; else if (type == 'checkbox' || type == 'radio') this.checked = false; else if (tag == 'select') this.selectedIndex = -1; }); };

Related: See More


Questions / Comments: