Cara penerapan pada blog
Salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>
.megamenu_wrapper {
margin: 0 auto;
display: block;
position: relative;
z-index: 9999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 21px;
}
.megamenu_wrapper {
width: 980px;
margin-top: 30px;
}
.megamenu_container {
width: 100%;
margin: 0 auto;
height: 40px;
}
.megamenu_wrapper .megamenu_container {
width: 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.megamenu_container .megamenu {
list-style: none;
width: 960px;
margin: 0 auto;
padding: 0;
}
.megamenu > li {
float: left;
position: relative;
margin-right: 5px;
border: none;
}
.megamenu li.menuitem_fullwidth {
position: static !important;
}
.megamenu > li > a {
outline: 0;
padding: 9px 15px 11px 15px;
text-decoration: none;
display: block;
}
.megamenu > li .menuitem_drop {
padding-right: 27px;
}
.megamenu > li.menuitem_nodrop > a {
padding-bottom: 10px;
}
/* Right aligned menu item */
.megamenu > li.menuitem_right {
float: right;
right: 0;
margin-right: 0;
}
/* Menu Button (Mobiles) */
.megamenu li.megamenu_button {
display: none;
}
.megamenu li.megamenu_button_active {
background: #000000 !important;
}
/* Drop Downs Containers */
.megamenu .dropdown_1column,
.megamenu .dropdown_2columns,
.megamenu .dropdown_3columns,
.megamenu .dropdown_4columns,
.megamenu .dropdown_5columns,
.megamenu .dropdown_fullwidth {
margin: 0;
display: none;
position: absolute;
top: 41px;
left: -1px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Drop Downs Sizes */
.megamenu .dropdown_1column {
width: 135px;
padding: 15px 14px 15px 15px;
}
.megamenu .dropdown_2columns {
width: 290px;
padding: 15px 11px 15px 15px;
}
.megamenu .dropdown_3columns {
width: 445px;
padding: 15px 8px 15px 15px;
}
.megamenu .dropdown_4columns {
width: 600px;
padding: 15px 5px 15px 15px;
}
.megamenu .dropdown_5columns {
width: 755px;
padding: 15px 2px 15px 15px;
}
.megamenu .dropdown_fullwidth {
width: 945px;
padding: 15px 0 15px 15px;
top: 42px;
left: 10px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.megamenu_wrapper .dropdown_right {
left: auto;
right: -1px;
}
.megamenu_wrapper .megamenu li.menuitem_right .dropdown_fullwidth {
left: auto;
right: 8px;
}
/* Showing Drop Down on Mouse Hover */
.megamenu li:hover > div {
display: block;
}
/* Columns Sizes */
.megamenu .col_one_sixth,
.megamenu .col_one_fifth,
.megamenu .col_one_quarter,
.megamenu .col_one_third,
.megamenu .col_two_fifths,
.megamenu .col_half,
.megamenu .col_three_fifths,
.megamenu .col_two_thirds,
.megamenu .col_three_quarters,
.megamenu .col_four_fifths,
.megamenu .col_five_sixths,
.megamenu .col_full {
float: left;
margin-left: 2%;
}
.megamenu .col_one_sixth {
width: 14.66667%;
}
.megamenu .col_one_fifth {
width: 18%;
}
.megamenu .col_one_quarter {
width: 23%;
}
.megamenu .col_one_third {
width: 31.33333%;
}
.megamenu .col_two_fifths {
width: 38%;
}
.megamenu .col_half {
width: 48%;
}
.megamenu .col_three_fifths {
width: 58%;
}
.megamenu .col_two_thirds {
width: 64.66667%;
}
.megamenu .col_three_quarters {
width: 73%;
}
.megamenu .col_four_fifths {
width: 78%;
}
.megamenu .col_five_sixths {
width: 81.33333%;
}
.megamenu .col_full {
width: 98%;
}
/* Important */
/* Use the firstcolumn class for the first element of a new row of content */
.megamenu .firstcolumn {
margin-left: 0;
clear: left;
}
/* Content Stylink */
.megamenu p,
.megamenu ul,
.megamenu li,
.megamenu h2,
.megamenu h3 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 21px;
text-align: left;
}
.megamenu p {
margin: 0;
margin-bottom: 18px;
}
.megamenu .strong {
font-weight: bold;
}
.megamenu .italic {
font-style: italic;
}
.megamenu h2,
.megamenu h3 {
margin-top: 7px;
}
.megamenu h2 {
font-weight: 400;
font-size: 21px;
margin-bottom: 18px;
padding-bottom: 11px;
}
.megamenu h3 {
font-weight: 600;
font-size: 14px;
margin-bottom: 14px;
padding-bottom: 7px;
}
.megamenu li a {
text-decoration: none;
}
.megamenu .pusher {
/* Use this pucher if you want to give more vertical spacing between your rows of content */
margin-top: 18px;
}
/* Icon paragraphs */
.megamenu .help,
.megamenu .favorite,
.megamenu .mail,
.megamenu .print {
padding-left: 36px;
margin-bottom: 18px;
}
.megamenu .help {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/help.png") no-repeat 0 2px;
}
.megamenu .favorite {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/favorite.png") no-repeat 0 2px;
}
.megamenu .mail {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/mail.png") no-repeat 0 2px;
}
.megamenu .print {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/print.png") no-repeat 0 2px;
}
/* Images styles */
.megamenu .imgshadow_dark,
.megamenu .imgshadow_light {
padding: 4px;
margin-top: 5px;
}
.megamenu .img_left {
/* Image sticks to the left */
float: left;
margin: 5px 15px 5px 0;
}
.megamenu .img_right {
/* Image sticks to the right */
float: right;
margin: 5px 0 5px 15px;
}
/* Box styles */
.megamenu li .black_box,
.megamenu li .dark_grey_box {
margin: -8px 0 18px 0;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding: 8px 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Standard lists styles */
.megamenu li ul {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
}
.megamenu 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: 100%;
}
.megamenu li ul li a {
padding: 0;
}
/* Greybox lists styles */
.megamenu li .greybox li {
margin: 0 0 4px 0;
padding: 4px 6% 4px 6%;
width: 88%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* Other lists styles */
.megamenu li .plus li {
margin: 0 0 4px 0;
padding: 0 0 0 20px;
float: left;
}
/* Social Icons */
.megamenu li ul.social {
list-style: none;
margin: 0;
padding: 0;
}
.megamenu li ul.social li {
padding-top: 5px;
margin: 0 12px 12px 0;
float: left;
position: relative;
display: inline;
width: 32px;
}
.megamenu li ul.social li img {
border: none;
}
.megamenu li ul.social li:hover {
padding-top: 5px;
margin: -1px 12px 12px 0;
}
.megamenu li ul.social li span {
display: none;
}
/* 2-Levels Drop Down */
.megamenu .dropdown_flyout {
min-width: 120px;
}
.megamenu .levels,
.megamenu .levels ul {
padding: 0;
margin: 0;
list-style: none;
}
.megamenu .levels a {
display: block;
width: 10em;
}
.megamenu .levels li {
float: left;
}
.megamenu .levels li ul {
position: absolute;
top: -23px;
margin: 15px 0 0 4px;
padding: 6px 12px;
left: -999em;
z-index: 9999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.megamenu .levels li:hover > ul {
left: 96%;
}
/* Contact Form */
.megamenu .contact_form {
display: block;
margin-bottom: 10px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.megamenu .contact_form label {
display: inline-block;
float: left;
width: 80px;
font-size: 12px;
}
.megamenu .contact_form input,
.megamenu .contact_form textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 90%;
padding: 8px 4% 8px 4%;
margin: 9px 0 9px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.megamenu .contact_form textarea {
resize: none;
}
.megamenu .contact_form .required {
color: #C00;
}
.megamenu .contact_form .form_buttons {
margin: 4px 0 0 0;
}
.megamenu .contact_form input.button {
width: 80px;
margin-right: 10px;
cursor: pointer;
padding: 8px;
}
.megamenu .contact_form .special {
display: none;
}
.megamenu .contact_form .error,
.megamenu .contact_form .sent {
font-size: 11px;
padding: 2px 5px 2px 5px;
text-shadow: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.megamenu .contact_form .error {
background: #FBE5E2;
border: #F2A197 solid 1px;
color: #992213;
}
.megamenu .contact_form .sent {
background: #E1F8CB;
border: #C6D880 solid 1px;
color: #37620d;
}
/* Light Theme */
.megamenu_light_theme .megamenu_container > ul > li:hover,
.megamenu_light_theme .megamenu_container .megamenu > li.active,
.megamenu_light_theme .megamenu_container > ul > li.menuitem_nodrop:hover {
background-color: #eeeeee;
}
.megamenu_light_theme .megamenu_container > ul > li > a,
.megamenu_light_theme .megamenu_container .megamenu > li.noactive a {
color: #eee;
text-shadow: 1px 1px 1px #000000;
}
.megamenu_light_theme .megamenu_container > ul > li:hover > a {
color: #161616;
text-shadow: 1px 1px 1px #fff;
}
.megamenu_light_theme ul li .menuitem_drop,
.megamenu_light_theme .megamenu li.noactive .menuitem_drop {
background-image: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/arrow_down1.png");
background-repeat: no-repeat;
background-position: right 17px;
}
.megamenu_vertical_left .megamenu_light_theme ul li .menuitem_drop,
.megamenu_vertical_left .megamenu_light_theme .megamenu li.noactive .menuitem_drop {
background-image: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/arrow_right1.png");
background-position: 90% 15px;
}
.megamenu_vertical_right .megamenu_light_theme ul li .menuitem_drop,
.megamenu_vertical_right .megamenu_light_theme .megamenu li.noactive .menuitem_drop {
background-image: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/arrow_left1.png");
background-position: 10% 15px;
}
.megamenu_light_theme .megamenu > li > div,
.megamenu_light_theme ul .levels li ul {
background: #eeeeee;
border: 1px solid #444444;
border-top: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#BBBBBB));
background: -webkit-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -o-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -ms-linear-gradient(top, #EEEEEE, #BBBBBB);
background: linear-gradient(top, #EEEEEE, #BBBBBB);
}
.megamenu_wrapper_vertical .megamenu_light_theme .megamenu > li > div,
.megamenu_light_theme ul .levels li ul {
border: 1px solid #444444;
}
.megamenu_light_theme ul p,
.megamenu_light_theme ul h2,
.megamenu_light_theme ul h3,
.megamenu_light_theme ul li ul li {
text-shadow: 1px 1px 1px #FFFFFF;
}
.megamenu_light_theme ul h2,
.megamenu_light_theme ul h3 {
border-bottom: 1px solid #888888;
}
.megamenu_light_theme ul .imgshadow_dark {
/* Better style on dark background */
background: #FFFFFF;
border: 1px solid #333333;
-moz-box-shadow: 0 0 5px #000000;
-webkit-box-shadow: 0 0 5px #000000;
box-shadow: 0 0 5px #000000;
}
.megamenu_light_theme ul .imgshadow_light {
/* Better style on light background */
background: #FFFFFF;
border: 1px solid #777777;
-webkit-box-shadow: 0 0 5px #666666;
-moz-box-shadow: 0 0 5px #666666;
box-shadow: 0 0 5px #666666;
}
.megamenu_light_theme ul li .black_box {
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
background-color: #333333;
-webkit-box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
box-shadow: inset 0 0 3px #000000;
}
.megamenu_light_theme ul li .dark_grey_box {
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
background-color: #555555;
-webkit-box-shadow: inset 0 0 3px #111111;
-moz-box-shadow: inset 0 0 3px #111111;
box-shadow: inset 0 0 3px #111111;
}
.megamenu_light_theme ul li .greybox li {
background: #F4F4F4;
border: 1px solid #bbbbbb;
}
.megamenu_light_theme ul li .greybox li:hover {
background: #ffffff;
border: 1px solid #aaaaaa;
}
.megamenu_light_theme ul li .plus li {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/plus.png") left 6px no-repeat;
}
.megamenu_light_theme ul .levels a.parent,
.megamenu_light_theme ul .levels a.parent:hover {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/arrow_right1.png") right center no-repeat;
}
.megamenu_vertical_right .megamenu_light_theme ul .levels a.parent,
.megamenu_vertical_right .megamenu_light_theme ul .levels a.parent:hover {
background: url("http://demos.pixelworkshop.fr/css3_mega_menu/img/arrow_left1.png") left center no-repeat;
}
.megamenu_light_theme ul .contact_form input:focus,
.megamenu_light_theme ul .contact_form textarea:focus,
.megamenu_light_theme ul .contact_form select:focus,
.megamenu_light_theme ul .contact_form input:hover,
.megamenu_light_theme ul .contact_form textarea:hover,
.megamenu_light_theme ul .contact_form select:hover {
box-shadow: rgba(0,0,0, 0.7) 0 0 3px;
-moz-box-shadow: rgba(0,0,0, 0.7) 0 0 3px;
-webkit-box-shadow: rgba(0,0,0, 0.7) 0 0 3px;
border: 1px solid #333333;
}
.megamenu_light_theme ul .contact_form input,
.megamenu_light_theme ul textarea,
.megamenu_light_theme ul select {
color: #FFFFFF;
background-color: #222222;
border: 1px solid #0A0A0A;
}
.megamenu_light_theme ul .contact_form input.button {
background-color: #1E1E1E;
border: 1px solid #0A0A0A;
color: #cccccc;
}
.megamenu_light_theme ul .contact_form input.button:hover {
color: #eeeeee;
background-color: #222222;
border: 1px solid #000000;
}
/* Black */
/* Blue */
/* Brown */
/* Green */
/* Light Blue */
.megamenu_lightblue {
background: #52786b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#709e8e), to(#52786b));
background: -webkit-linear-gradient(top, #709e8e, #52786b);
background: -moz-linear-gradient(top, #709e8e, #52786b);
background: -o-linear-gradient(top, #709e8e, #52786b);
background: -ms-linear-gradient(top, #709e8e, #52786b);
background: linear-gradient(top, #709e8e, #52786b);
border: 1px solid #608c7d;
border-top: 1px solid #99b9ae;
}
.megamenu_dark_theme .megamenu_lightblue li div a {
color: #608c7d;
}
.megamenu_dark_theme .megamenu_lightblue li div a:hover {
color: #99b9ae;
}
.megamenu_dark_theme .megamenu_lightblue li ul li a:hover {
color: #99b9ae;
}
.megamenu_light_theme .megamenu_lightblue li div a {
color: #608c7d;
}
.megamenu_light_theme .megamenu_lightblue li div a:hover {
color: #99b9ae;
}
.megamenu_light_theme .megamenu_lightblue li ul li a:hover {
color: #99b9ae;
}
/* Orange */
/* Pink */
/* Purple */
/* Red */
/* No left & right borders if full width menu bar */
/* Mobile Devices */
.megamenu_dark_theme .megamenu_container .megamenu > li.noactive,
.megamenu_light_theme .megamenu_container .megamenu > li.noactive {
background-color: transparent;
border: none;
}
@media only screen and (max-width: 1023px) {
/* Menu Containers */
.megamenu_wrapper {
width: 95%;
}
.megamenu_wrapper .megamenu_container {
width: 100%;
padding: 0;
margin: 0 auto;
height: auto;
float: left;
}
.megamenu_wrapper .megamenu_container .megamenu {
width: 98%;
margin: 0;
padding: 0 1% 0 1%;
}
/* Menu Items */
.megamenu_wrapper .megamenu > li {
height: 40px;
position: static;
float: left;
right: auto;
}
.megamenu_wrapper .megamenu > li.menuitem_right {
float: right;
}
/* Menu Drop Downs */
.megamenu_wrapper .megamenu .dropdown_1column,
.megamenu_wrapper .megamenu .dropdown_2columns,
.megamenu_wrapper .megamenu .dropdown_3columns,
.megamenu_wrapper .megamenu .dropdown_4columns,
.megamenu_wrapper .megamenu .dropdown_5columns,
.megamenu_wrapper .megamenu .dropdown_fullwidth,
.megamenu_wrapper .megamenu .dropdown_right {
top: auto;
right: auto;
left: auto;
float: left;
border-top: none;
padding: 2%;
margin: -1px 0 0 -1px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.megamenu .dropdown_1column {
width: 12.6666%;
}
.megamenu .dropdown_2columns {
width: 29.3333%;
}
.megamenu .dropdown_3columns {
width: 44%;
}
.megamenu .dropdown_4columns {
width: 60.6666%;
}
.megamenu .dropdown_5columns {
width: 79.3333%;
}
.megamenu .dropdown_fullwidth {
width: 94%;
}
.megamenu_wrapper .megamenu .dropdown_right {
left: auto;
right: 1%;
}
.megamenu_wrapper .megamenu .dropdown_fullwidth,
.megamenu_wrapper .megamenu li.menuitem_right .dropdown_fullwidth {
top: 41px;
right: auto;
left: 1%;
margin: 0;
}
/* Menu Contact Form */
.megamenu .contact_form label {
width: 92%;
}
.megamenu .contact_form input,
.megamenu .contact_form textarea {
width: 92%;
}
.megamenu .contact_form .form_buttons {
margin: 4px 0 0 0;
}
/* Vertical Menu */;
}
@media only screen and (max-width:768px) {
.megamenu_wrapper {
width: 420px;
margin: 0 auto;
float: none;
}
.megamenu_vertical_left,
.megamenu_vertical_right {
float: none;
}
.megamenu_wrapper .megamenu_container {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.megamenu_wrapper .megamenu_container .megamenu {
width: 100%;
margin: 0;
padding: 0;
}
.megamenu_container .megamenu > li,
.megamenu_container .megamenu > li:hover,
.megamenu_container .megamenu > li.menuitem_right,
.megamenu_container .megamenu > li.menuitem_right:hover {
float: left;
width: 100%;
display: block;
padding-right: 0;
margin-right: 0;
}
.megamenu_wrapper .megamenu li.menuitem_right .dropdown_fullwidth {
top: auto;
right: auto;
left: 0;
}
.megamenu_container .megamenu .dropdown_1column,
.megamenu_container .megamenu .dropdown_2columns,
.megamenu_container .megamenu .dropdown_3columns,
.megamenu_container .megamenu .dropdown_4columns,
.megamenu_container .megamenu .dropdown_5columns,
.megamenu_container .megamenu .dropdown_fullwidth,
.megamenu_container .megamenu .dropdown_right {
left: 0;
top: auto;
margin: -1px 0 0 0;
width: 390px;
padding: 0 15px 0 15px;
}
/* Menu Drop Downs Columns */
.megamenu .col_one_sixth,
.megamenu .col_one_fifth,
.megamenu .col_one_quarter,
.megamenu .col_one_third,
.megamenu .col_two_fifths,
.megamenu .col_half,
.megamenu .col_three_fifths,
.megamenu .col_two_thirds,
.megamenu .col_three_quarters,
.megamenu .col_four_fifths,
.megamenu .col_five_sixths,
.megamenu .col_full {
margin-left: 0;
margin-right: 0;
width: 96%;
float: left;
display: block;
}
.megamenu > .col_one_sixth,
.megamenu > .col_one_fifth,
.megamenu > .col_one_quarter,
.megamenu > .col_one_third,
.megamenu > .col_two_fifths,
.megamenu > .col_half,
.megamenu > .col_three_fifths,
.megamenu > .col_two_thirds,
.megamenu > .col_three_quarters,
.megamenu > .col_four_fifths,
.megamenu > .col_five_sixths,
.megamenu > .col_full {
margin-left: 2%;
margin-right: 2%;
}
/* Regular Drop Down (turned into a list) */
.megamenu_wrapper .megamenu .levels li ul {
position: relative;
top: auto;
margin: 0;
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
left: auto;
border: none;
background: none;
}
.megamenu_wrapper .megamenu .levels li {
float: left;
width: 100%;
}
.megamenu_wrapper .megamenu .levels li:hover > ul {
left: auto;
}
.megamenu_light_theme ul .levels a.parent,
.megamenu_light_theme ul .levels a.parent:hover,
.megamenu_light_theme ul .levels li ul,
.megamenu_wrapper .megamenu_light_theme ul .levels a.parent,
.megamenu_wrapper .megamenu_light_theme ul .levels a.parent:hover,
.megamenu_wrapper .megamenu_light_theme ul .levels li ul {
background: none;
border: none;
};
}
@media only screen and (max-width:479px) {
.megamenu_wrapper {
width: 300px;
}
.megamenu_container .megamenu .dropdown_1column,
.megamenu_container .megamenu .dropdown_2columns,
.megamenu_container .megamenu .dropdown_3columns,
.megamenu_container .megamenu .dropdown_4columns,
.megamenu_container .megamenu .dropdown_5columns,
.megamenu_container .megamenu .dropdown_fullwidth,
.megamenu_container .megamenu .dropdown_right {
width: 270px;
};
}Kemudian anda dapat menambahkan kode HTML berikut ini pada tempat yang anda inginkan, atau pada Widget Html/JavaScript blog anda.
<div class="megamenu_wrapper megamenu_light_theme">
<!-- BEGIN MENU WRAPPER -->
<div class="megamenu_container megamenu_lightblue">
<!-- BEGIN MENU CONTAINER -->
<ul class="megamenu">
<!-- BEGIN MENU -->
<li class="megamenu_button"><a href="#_">Mega Menu</a>
</li>
<li><a href="#_" class="menuitem_drop">Home</a>
<!-- Begin Home Item -->
<div class="dropdown_2columns">
<!-- Begin columns container -->
<div class="col_full 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="http://codecanyon.net/user/Pixelworkshop/portfolio">links</a> etc.</p>
<h2 class="pusher">Cross Browser Support</h2>
<img src="http://demos.pixelworkshop.fr/css3_mega_menu/img/browsers.png" alt="" />
<p>This mega menu has been tested in all major browsers.</p>
<h2 class="pusher">Compatible Browsers</h2>
<div class="col_half firstcolumn">
<ul class="plus">
<li>Internet Explorer</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
</div>
<div class="col_half">
<ul class="plus">
<li>Chrome</li>
<li>Safari</li>
<li>What else ?</li>
</ul>
</div>
</div>
</div>
<!-- End columns container -->
</li>
<!-- End Home Item -->
<li><a href="#_" class="menuitem_drop">Typography</a>
<!-- Begin Typography Item -->
<div class="dropdown_5columns">
<!-- Begin columns container -->
<div class="col_full firstcolumn">
<h2>This is an example of a large container with 5 columns</h2>
<div class="col_one_fifth 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.</p>
</div>
<div class="col_one_fifth">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus lectus at arcu accumsan tincidunt.</p>
</div>
<div class="col_one_fifth">
<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_one_fifth">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>
<div class="col_one_fifth">
<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_full firstcolumn">
<h2>Here is some content with side images</h2>
<div class="col_two_thirds firstcolumn">
<img src="http://demos.pixelworkshop.fr/css3_mega_menu/img/01.jpg" class="img_left imgshadow_light" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus quis felis consequat scelerisque. 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>
<div class="clear"></div>
<img src="http://demos.pixelworkshop.fr/css3_mega_menu/img/02.jpg" 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 vestibulum nisi non nunc blandit placerat, eget varius metus. Aliquam sodales nisi.
<br
/><a href="#">Read more...</a>
</p>
</div>
<div class="col_one_third">
<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.</p>
</div>
</div>
</div>
<!-- End columns container -->
</li>
<!-- End Typography Item -->
<li class="menuitem_fullwidth"><a href="#_" class="menuitem_drop">Full Width</a>
<!-- Begin Full Width Item -->
<div class="dropdown_fullwidth">
<!-- Begin fullwidth container -->
<div class="col_two_thirds firstcolumn">
<h2>This is a heading title</h2>
<div class="col_half 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_half">
<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 class="col_one_quarter 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_one_quarter">
<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_one_quarter">
<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_one_quarter">
<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>
<div class="col_one_third">
<h2>This is another title</h2>
<div class="col_half firstcolumn">
<p>Fusce at sapien lorem. Sed ultricies nibh blandit turpis scelerisque sit amet varius lacus pretium. Nulla nunc lectus, fermentum ut hendrerit tempus, ullamcorper eu velit.</p>
<p>Nunc ut nisl augue. Fusce ligula est, volutpat et pulvinar et, scelerisque at augue. Sed placerat, metus nec ultricies ullamcorper, turpis massa dapibus ante.</p>
</div>
<div class="col_half">
<p>Curabitur ut sodales odio. Cras quis mi ac nisl euismod tempor sed a arcu. Vestibulum faucibus fermentum purus ac tempor. Maecenas ut leo quis ipsum vulputate varius. Pellentesque eget.</p>
<p>Maecenas eleifend adipiscing leo quis gravida. Morbi elit tortor, sodales sodales molestie ac, pharetra vel velit. Etiam massa eros, tincidunt eget luctus nec</p>
</div>
</div>
</div>
<!-- End fullwidth container -->
</li>
<!-- End Full Width Item -->
<li><a href="#_" class="menuitem_drop">Elements</a>
<!-- Begin Elements Item -->
<div class="dropdown_3columns">
<!-- Begin columns container -->
<div class="col_full firstcolumn">
<h2>Lists in Boxes</h2>
<div class="col_one_third 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_one_third">
<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_one_third">
<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_full firstcolumn">
<h2 class="pusher">Here are some image examples</h2>
<img src="http://demos.pixelworkshop.fr/css3_mega_menu/img/03.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://demos.pixelworkshop.fr/css3_mega_menu/img/04.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 columns container -->
</li>
<!-- End Elements Item -->
<li><a href="#_" class="menuitem_drop">Lists</a>
<!-- Begin Lists Item -->
<div class="dropdown_2columns">
<!-- Begin columns container -->
<div class="col_half 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_half">
<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_half 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_half">
<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 columns container -->
</li>
<!-- Begin Lists Item -->
<li><a href="#_" class="menuitem_drop">Drop Down</a>
<!-- Begin Drop Down Item -->
<div class="dropdown_1column dropdown_flyout">
<!-- Begin columns container -->
<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>
<!-- End columns container -->
</li>
<!-- End Drop Down Item -->
<li class="menuitem_nodrop"><a href="http://codecanyon.net/user/Pixelworkshop/portfolio">Link</a>
</li>
<!-- No Drop Down Item -->
<li class="menuitem_right"><a href="#_" class="menuitem_drop">Contact</a>
<!-- Begin Contact Item -->
<div class="dropdown_2columns dropdown_right">
<!-- Begin right aligned columns container -->
<h2>Contact Us</h2>
<p>Please fill in the following form to contact us</p>
<div class="contact_form">
<div class="message">
<div id="alert"></div>
</div>
<form method="post" action="js/sendmail.php" id="contactForm">
<label for="name">Name<span class="required"> *</span>
</label>
<input name="name" type="text" id="name" />
<br />
<label for="email">Email<span class="required"> *</span>
</label>
<input name="email" type="text" id="email" />
<br />
<label for="message">Message<span class="required"> *</span>
</label>
<textarea name="message" cols="40" rows="5" 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>
<h2>Find us on social networks</h2>
<ul class="social">
<li>
<a href="#">
<img src='http://demos.pixelworkshop.fr/css3_mega_menu/img/twitter.png' alt="" /><span>Twitter</span>
</a>
</li>
<li>
<a href="#">
<img src='http://demos.pixelworkshop.fr/css3_mega_menu/img/facebook.png' alt="" /><span>Facebook</span>
</a>
</li>
<li>
<a href="#">
<img src='http://demos.pixelworkshop.fr/css3_mega_menu/img/flickr.png' alt="" /><span>Flickr</span>
</a>
</li>
<li>
<a href="#">
<img src='http://demos.pixelworkshop.fr/css3_mega_menu/img/rss.png' alt="" /><span>RSS Feed</span>
</a>
</li>
<li>
<a href="#">
<img src='http://demos.pixelworkshop.fr/css3_mega_menu/img/technorati.png' alt="" /><span>Technorati</span>
</a>
</li>
<li>
<a href="#">
<img src='http://demos.pixelworkshop.fr/css3_mega_menu/img/delicious.png' alt="" /><span>Delicious</span>
</a>
</li>
</ul>
</div>
<!-- End right aligned columns container -->
</li>
<!-- End Contact Item -->
</ul>
<!-- END MENU -->
</div>
<!-- END MENU CONTAINER -->
</div>
<!-- END MENU WRAPPER -->Silahkan anda mengedit yang perlu dan sesuaikan pada style template anda sesuai dengan selera, Selamat berkreasi.
Posting Komentar