0% found this document useful (0 votes)
5 views11 pages

New 文字文件

The document contains CSS code for a mega menu bar, detailing styles for various menu elements, dropdown containers, and responsive design for mobile devices. It includes specifications for layout, padding, and hover effects, as well as media queries for different screen sizes. The code is organized into sections, each addressing specific functionalities and visual aspects of the mega menu.

Uploaded by

koriw63838
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views11 pages

New 文字文件

The document contains CSS code for a mega menu bar, detailing styles for various menu elements, dropdown containers, and responsive design for mobile devices. It includes specifications for layout, padding, and hover effects, as well as media queries for different screen sizes. The code is organized into sections, each addressing specific functionalities and visual aspects of the mega menu.

Uploaded by

koriw63838
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 11

/* _______________________________________________

01 MEGA MENU BAR


_______________________________________________ */

.megamenu_container {
width:100%;}

/* Right aligned menu item */

.megamenu li.megamenu_right {
float:right;
margin-right:-1px;
}
.megamenu li.megamenu_right a {
margin-right:5px;
}

/* _______________________________________________

02 MEGA MENU CONTAINERS


_______________________________________________ */

.megamenu li .dropdown_container,
.megamenu li .dropdown_fullwidth,
.megamenu li .dropdown_multilevel {
position: absolute;
margin:0;
padding: 0;
/*padding-top:24px;
padding-bottom:10px;*/
left:-9999em;
top:-9999em;
display: block;
zoom:1;
z-index:9998;
float: left;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.megamenu li .dropdown_first {
margin-left:-1px;
}
.megamenu li .droplast_right {
margin-right:-1px;
}

/* Showing Drop Down on Mouse Hover Gilad commenting out this whole block turning
it into click only */
/*
.megamenu li:hover .dropdown_container {
top:45px;
left:auto;
}
.megamenu li:hover .dropdown_fullwidth {
top:45px;
left:-1px;
}
.megamenu li:hover .dropdown_right {
top:45px;
left:auto;
right:0;
}
.megamenu li .dropdown_right {
right:0;
}
*/
/* Gilad removed the hover and hide fullwidth to make button clickable */
.megamenu li .dropdown_container {
top:45px;
left:auto;
}
.megamenu li .dropdown_fullwidth {
top:45px;
left:-1px;
display: none;
}
.megamenu li .dropdown_right {
top:45px;
left:auto;
right:0;
}
.megamenu li .dropdown_right {
right:0;
}

/* Gilad adding
.megamenu li .dropdown_fullwidth {display: none; top:45px;
left:0;}
*/
/*
Bigger containers need smaller padding values and
on the opposite, smaller containers will have
higher paddings.
This makes the content within each kind of drop down
equally distant from the left edge.
*/

.megamenu .dropdown_1column {
width: 8.3334%;
padding-left: 2%;
padding-right: 2%;
}
.megamenu .dropdown_2columns {
width: 16.6667%;
padding-left: 1.8333%;
padding-right: 1.8333%;
}
.megamenu .dropdown_3columns {
width: 25%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.megamenu .dropdown_4columns {
width: 33.3334%;
padding-left: 1.333%;
padding-right: 1.333%;
}
.megamenu .dropdown_5columns {
width: 41.6667%;
padding-left: 1.166%;
padding-right: 1.166%;
}
.megamenu .dropdown_6columns {
width: 50%;
padding-left: 1%;
padding-right: 1%;
}
.megamenu .dropdown_7columns {
width: 58.3334%;
padding-left: 0.833%;
padding-right: 0.833%;
}
.megamenu .dropdown_8columns {
width: 66.6667%;
padding-left: 0.666%;
padding-right: 0.666%;
}
.megamenu .dropdown_9columns {
width: 75%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.megamenu .dropdown_10columns {
width: 83.3334%;
padding-left: 0.333%;
padding-right: 0.333%;
}
.megamenu .dropdown_11columns {
width: 91.6667%;
padding-left: 0.1666%;
padding-right: 0.1666%;
}
.megamenu .dropdown_12columns,
.megamenu .dropdown_fullwidth {
width: 100%;
}

/* _______________________________________________

03 DROP DOWN COLUMNS GRID


_______________________________________________ */
.megamenu .col_1,
.megamenu .col_2,
.megamenu .col_3,
.megamenu .col_4,
.megamenu .col_5,
.megamenu .col_6,
.megamenu .col_7,
.megamenu .col_8,
.megamenu .col_9,
.megamenu .col_10,
.megamenu .col_11,
.megamenu .col_12 {
float: left;
display:inline;
position: relative;
/* Gilad switched margin with padding */
margin-left: 0;
margin-right: 0;
padding-left: 2%;
padding-right: 2%;
/*
Rounding error with IE7.
Lower margin values will absorb the difference.
*/
*margin-left: 1.9%;
*margin-right: 1.9%;
}

.megamenu .col_1 {width:4.33%;}


.megamenu .col_2 {width:12.66%;}
.megamenu .col_3 {width:21%;}
.megamenu .col_4 {width:29.33%;}
.megamenu .col_5 {width:37.66%;}
.megamenu .col_6 {width:46%;}
.megamenu .col_7 {width:54.33%;}
.megamenu .col_8 {width:62.66%;}
.megamenu .col_9 {width:71%;}
.megamenu .col_10 {width:79.33%;}
.megamenu .col_11 {width:87.66%;}
.megamenu .col_12 {width:96%;}

.megamenu .rowcontent {
clear:left;
/*
IE7 clear issue.
Display inline required.
*/
*display:inline;
}

/* _______________________________________________
04 FLY-OUT MENU
_______________________________________________ */

.megamenu .dropdown_flyout,
.megamenu .dropdown_flyout .dropdown_flyout_level {
padding: 0;
margin: 0;
list-style: none;
z-index: 9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.megamenu .dropdown_flyout li {
float: left;
width: 92%;
padding: 3px 4% 3px 4%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.megamenu .dropdown_flyout ul li {
width: 140px;
padding: 3px 10px 3px 10px;
}
.megamenu .dropdown_flyout a {
display: block;
width: 10em;
}
.megamenu .dropdown_flyout .dropdown_flyout_level {
position: absolute;
margin:15px 0 0 4px;
padding:6px;
left: -9999em;
top:-9999em;
display: block;
zoom:1;
float: left;
}
.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level {
left:95%;
top:-21px;
}
.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level_left {
left:-108%;
right:100%;
}

/* _______________________________________________

05 MEGA MENU WEB ELEMENTS


_______________________________________________ */
/* 1. General Typography */

.megamenu p,
.megamenu h1,
.megamenu h2,
.megamenu h3,
.megamenu h4,
.megamenu h5,
.megamenu h6 {
padding:0;
margin:0 0 10px;
}
.megamenu > div a {
text-decoration: none;
outline: none;
display: block;
}
.megamenu > div a:hover {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}
.megamenu p {
font-size:12px;
line-height:21px;
}
.megamenu h1,
.megamenu h2,
.megamenu h3,
.megamenu h4,
.megamenu h5,
.megamenu h6 {
font-weight: normal;
margin:0 0 10px 0;
}
.megamenu h1 {
font-size: 24px;
line-height: 28px;
margin: 20px 0;
}
.megamenu h2 {
font-size: 20px;
line-height: 22px;
}
.megamenu h3 {
font-size: 18px;
line-height: 22px;
}
.megamenu h4 {
font-size: 18px;
line-height: 25px;
margin: 20px 0;
font-weight: normal;
}
.megamenu h5 {
font-size: 12px;
line-height: 18px;
margin-bottom:14px;
}
.megamenu h6 {
font-size: 10px;
line-height: 16px;
margin-bottom:14px;
text-transform:uppercase;
}

/* 2. Lists */

.megamenu ul,
.megamenu li ol {
padding:0;
margin:0 0 18px 20px;
}
.megamenu li ul {
list-style:disc;
}
.megamenu li ol {
list-style:decimal;
*margin-left: 22px;
}
.megamenu ul li,
.megamenu li ol li {
font-size:16px;
position:relative;
padding:0;
margin:0;
float:none;
text-align:left;
padding: 8px 0;
}

.megamenu > div li a {line-height: 1.2;}

.megamenu .list_unstyled {
list-style: none;
margin-left:0;
}

/* _______________________________________________

09 MOBILE DEVICES
_______________________________________________ */

/* 1. Common Media Queries */


@media only screen and (min-width: 320px) and (max-width: 984px) {

.megamenu img {
max-width: 96%;
height: auto;
}
.megamenu textarea {
width:96%;
}

@media only screen and (min-width: 480px) and (max-width: 967px) { /*767px*/

.megamenu_container .megamenu > li > div > .responsive_sixths,


.megamenu_container_vertical .megamenu > li > .dropvertical_container > div >
.responsive_sixths {
width: 8.66%;
}
.megamenu_container .megamenu > li > div > .responsive_fourths,
.megamenu_container_vertical .megamenu > li > .dropvertical_container > div >
.responsive_fourths {
width: 17%;
}
.megamenu_container .megamenu > li > div > .responsive_thirds,
.megamenu_container_vertical .megamenu > li > .dropvertical_container > div >
.responsive_thirds
{
width: 25.33334%;
}

.megamenu_container .megamenu .col_2.responsive_halfs,


.megamenu_container .megamenu .col_3.responsive_halfs {
width: 42%;
}

.megamenu_container .megamenu .col_2.responsive_halfs.responsive_clearleft,


.megamenu_container .megamenu .col_3.responsive_halfs.responsive_clearleft
{
clear: left;
}

@media only screen and (min-width:320px) and (max-width:767px) {

.megamenu .dropdown_flyout,
.megamenu .dropdown_flyout .dropdown_flyout_level {
position: relative;
left:auto;
top:auto;
padding: 0;
margin: 0 4% 0 4%;
}
.megamenu .dropdown_flyout li,
.megamenu .dropdown_flyout ul li {
width: 100%;
padding: 3px 0 3px 0;
}
.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level {
left:auto;
top:auto;
}
.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level_left {
left:auto;
right:auto;
}
.megamenu_dark .megamenu li .dropdown_flyout li ul,
.megamenu_light .megamenu li .dropdown_flyout li ul {
border:none;
background: none;
}
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent {
background:url("../img/dropdown.png") no-repeat right 9px;
}
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent {
background:url("../img/dropdown-b.png") no-repeat right 9px;
}
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent:hover,
.megamenu_dark .megamenu li .dropdown_flyout .dropdown_parent.active,
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent:hover,
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent.active {
background-color:transparent;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {

.megamenu_container .megamenu > li > div > .responsive_sixths,


.megamenu_container_vertical .megamenu > li > .dropvertical_container > div >
.responsive_sixths,
.megamenu_container .megamenu > li > div > .responsive_fourths,
.megamenu_container_vertical .megamenu > li > .dropvertical_container > div >
.responsive_fourths,
.megamenu_container .megamenu > li > div > .responsive_thirds,
.megamenu_container_vertical .megamenu > li > .dropvertical_container > div >
.responsive_thirds,
.megamenu_container .megamenu .col_2.responsive_halfs,
.megamenu_container .megamenu .col_3.responsive_halfs{
width: 42%;
}
.megamenu_container .megamenu .col_2.responsive_halfs.responsive_clearleft,
.megamenu_container .megamenu .col_3.responsive_halfs.responsive_clearleft
{
clear: left;
}

/* 2. Horizontal Mega Menu Media Queries


@media only screen and (min-width: 885px) and (max-width: 984px) {

.megamenu_container .megamenu > li {


margin:0 8px 0 0;
}
.megamenu_container .megamenu > li.right {
margin-right:-1px;
}
.megamenu_container .megamenu > li > a {
padding: 10px 14px;
}

}
*/

@media only screen and (min-width:320px) and (max-width:767px) {

.megamenu_container {
height: auto;
position: relative;
}
.megamenu_container .megamenu > li,
.megamenu_container .megamenu > li:hover,
.megamenu_container .megamenu > li.right,
.megamenu_container .megamenu > li.right:hover {
float:none;
width:auto;
padding-right:0;
margin-right:0;
}
.megamenu_container .megamenu > li > a {
/*padding: 16px 10px 16px 10px;*/
padding: 10px 14px;
}
.megamenu_container .megamenu li.right a {
margin-right:0;
}

.megamenu_container .megamenu li:hover .dropdown_container,


.megamenu_container .megamenu li:hover .dropdown_fullwidth,
.megamenu_container .megamenu li:hover .dropdown_right {
top:auto;
left:-1px;
}
.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_6columns,
.megamenu_container .megamenu .dropdown_7columns,
.megamenu_container .megamenu .dropdown_8columns,
.megamenu_container .megamenu .dropdown_9columns,
.megamenu_container .megamenu .dropdown_10columns,
.megamenu_container .megamenu .dropdown_11columns,
.megamenu_container .megamenu .dropdown_12columns {
width: 100%;
padding-left:0;
padding-right:0;
}
.megamenu_container .megamenu .col_1,
.megamenu_container .megamenu .col_2,
.megamenu_container .megamenu .col_3,
.megamenu_container .megamenu .col_4,
.megamenu_container .megamenu .col_5,
.megamenu_container .megamenu .col_6,
.megamenu_container .megamenu .col_7,
.megamenu_container .megamenu .col_8,
.megamenu_container .megamenu .col_9,
.megamenu_container .megamenu .col_10,
.megamenu_container .megamenu .col_11,
.megamenu_container .megamenu .col_12 {
width:92%;
margin-left: 0;
margin-right: 0;
padding-left: 4%;
padding-right: 4%;
}
.megamenu_container .megamenu > li.megamenu_searchform .megamenu_searchfield
{
margin-left: 10px;
margin-bottom: 10px;
}

You might also like