API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 14th, 2018
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.19 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Item Name : Mega Menu Responsibe Based on Boostrap grid
  3. Version: 1.3.0
  4. Author: Ansonika
  5. Author URI: http://themeforest.net/user/Ansonika/
  6.  
  7. CSS STRUCTURE:
  8.  
  9. 1. BASE
  10. 2.  COMMON
  11. 3.  TABS
  12. 4. MEDIA QUERIES
  13.  
  14. /*============================================================================================*/
  15. /* 1.  BASE  */
  16. /*============================================================================================*/
  17.  
  18. .megamenu_container {
  19.     background-color:transparent;
  20.     width:1170px;
  21.     height:44px;
  22.     margin:0 auto;
  23.     position:relative;
  24.     z-index:2;
  25. }
  26. .megamenu > li {
  27.     display:inline;
  28.     border:none;
  29.     margin:0;
  30.     background-color:transparent;
  31.     padding: 14px 0 15px 15px;
  32.     -webkit-transition: background-color 0.4s ease-out;
  33.     -moz-transition: background-color 0.4s ease-out;
  34.     -o-transition: background-color 0.4s ease-out;
  35.     -ms-transition: background-color 0.4s ease-out;
  36.     transition: background-color 0.4s ease-out;
  37.     }
  38. .megamenu > li:hover{
  39.     background-color:#0e9100;
  40.     box-shadow: inset 5px 0 5px -5px  rgba(0, 0, 0, 0.35), inset -5px 0 5px -5px rgba(0, 0, 0, 0.35);
  41.     -webkit-box-shadow: inset 5px 0 5px -5px  rgba(0, 0, 0, 0.35), inset -5px 0 5px -5px rgba(0, 0, 0, 0.35);
  42.     -moz-box-shadow:  inset 5px 0 5px -5px  rgba(0, 0, 0, 0.35), inset -5px 0 5px -5px rgba(0, 0, 0, 0.35);
  43.     color:#fff;
  44.     text-decoration:none;
  45.     }
  46. .megamenu > li.active {
  47.     background-color:#0e9100;
  48.     box-shadow: inset 5px 0 5px -5px  rgba(0, 0, 0, 0.35), inset -5px 0 5px -5px rgba(0, 0, 0, 0.35);
  49.     -webkit-box-shadow: inset 5px 0 5px -5px  rgba(0, 0, 0, 0.35), inset -5px 0 5px -5px rgba(0, 0, 0, 0.35);
  50.     -moz-box-shadow:  inset 5px 0 5px -5px  rgba(0, 0, 0, 0.35), inset -5px 0 5px -5px rgba(0, 0, 0, 0.35);
  51.     color:#fff;
  52.     box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
  53. }
  54. .megamenu > li a.drop-down, .megamenu > li a.nodrop-down {
  55.     line-height:44px;
  56.     outline:0;
  57.     text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  58.     text-decoration:none;
  59.     color:#fff;
  60.     font-weight:700;
  61.     text-transform:uppercase;
  62.     font-size:12px;
  63.         }
  64.  
  65.         .megamenu > li a.drop-down {
  66.             background-image:url("../img/arrow-down-white.png");
  67.             background-repeat: no-repeat;
  68.             background-position:right 20px;
  69.             padding:14px 30px 15px 0;
  70.             color:#fff;
  71.         }
  72.         .megamenu > li a.nodrop-down {
  73.             padding:14px 15px 15px 0;
  74.         }
  75.         .megamenu > li a.drop-down:hover {
  76.             cursor:pointer;
  77.             background-image:url("../img/arrow-down-white.png");
  78.             color:#fff;
  79.         }
  80.  
  81.         .megamenu > li .nodrop-down:hover {
  82.             cursor:pointer;
  83.             background-image: none;
  84.             color:#fff;
  85.         }
  86.         .megamenu> li.active .drop-down{
  87.             cursor:pointer;
  88.             background-image:url("../img/arrow-down-white.png");
  89.             color:#fff;
  90.         }
  91.          .megamenu > li.active .nodrop-down {
  92.             color:#fff;
  93.         }
  94.  
  95.         a#megamenu-button-mobile {
  96.             background-image:url("../img/menu-down.png");
  97.             background-repeat: no-repeat;
  98.             background-position:98% 13px;
  99.             padding:12px 20px 12px 0;
  100.             color: #FF9;
  101.             text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  102.             text-transform:uppercase;
  103.             font-weight:700;
  104.             box-shadow:none;
  105.             display:none;
  106.             text-decoration:none;
  107.         }
  108.         a#megamenu-button-mobile.active {
  109.             background-image:url("../img/menu-up.png");
  110.             background-position:98% 11px;
  111.             box-shadow:none;
  112.         }
  113.  
  114. .megamenu > li .drop-down-container {
  115.     position:absolute;
  116.     top:44px;
  117.     left:0;
  118.     z-index:9998;
  119.     float:left;
  120.     color:#fff;
  121.     width: 1170px;
  122.     margin:0 0 40px 0;
  123.     padding:30px 15px 0px 15px;
  124.     -webkit-border-bottom-right-radius: 5px;
  125.     -webkit-border-bottom-left-radius: 5px;
  126.     -moz-border-radius-bottomright: 5px;
  127.     -moz-border-radius-bottomleft: 5px;
  128.     border-bottom-right-radius: 5px;
  129.     border-bottom-left-radius: 5px;
  130.     border-top:none;
  131.     background:#2d343e;
  132.     display: none;
  133. }
  134. .drop-down-container#icon-menu a {
  135.     display:block;
  136.     background:#424952;
  137.     -webkit-border-radius: 5px;
  138.     -moz-border-radius: 5px;
  139.     border-radius: 5px;
  140.     transition: background .5s ease;
  141.     font-size:14px;
  142.     font-weight:700;
  143.     font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  144.     padding:20px 15px;
  145.     margin-bottom:25px;
  146.     color:#fff;
  147.     -webkit-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1) ;
  148.     -moz-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1) ;
  149.     box-shadow:  inset 0 0 0 3px rgba(255, 255, 255, 0.1);
  150. }
  151. .drop-down-container#icon-menu a:hover{
  152.     background:#0fbd0f;
  153. }
  154.  
  155. .drop-down-container#icon-menu a i {
  156.     float: right;
  157.     color:#fff;
  158.     margin:-10px 0 0 0;
  159. }
  160.  
  161. .drop-normal {
  162.     position:relative;
  163. }
  164. .megamenu > li .drop-down-container.normal {
  165.      position:absolute; top:46px; left:-15px;
  166.     display: none;
  167.     padding-top:0;
  168.     padding-bottom:0;
  169.     background:none;
  170. }
  171. .drop-down-container.normal ul{
  172.     list-style:none;
  173.     margin:0;
  174.     padding:0;
  175. }
  176. .drop-down-container.normal ul li{
  177.     text-align:left;
  178. }
  179. .drop-down-container.normal ul li a{
  180.     display:block;
  181.     padding:5px 10px;
  182.     width:180px;
  183.     margin-bottom:3px;
  184.     color:#fff;
  185.     background-color:#0fbd0f;
  186.     -webkit-border-radius: 4px;
  187.     -moz-border-radius: 4px;
  188.     border-radius: 4px;
  189. }
  190. .drop-down-container.normal ul li a:hover{
  191.     background-color:#111;
  192.     color:#fff;
  193. }
  194. /* normal drown v.1.3 */
  195. .drop-normal {
  196.     position:relative;
  197. }
  198. .megamenu > li .drop-down-container.normal {
  199.      position:absolute; top:50px; left:-15px;
  200.     display: none;
  201.     width:auto;
  202.     padding-top:0;
  203.     padding-bottom:0;
  204.     background:none;
  205. }
  206. .drop-down-container.normal ul{
  207.     list-style:none;
  208.     margin:0;
  209.     padding:0;
  210. }
  211. .drop-down-container.normal ul li{
  212.     text-align:left;
  213. }
  214. .drop-down-container.normal ul li a{
  215.     display:block;
  216.     padding:5px 10px;
  217.     width:180px;
  218.     margin-bottom:3px;
  219.     color:#fff;
  220.     background-color:#299300;
  221.     -webkit-border-radius: 4px;
  222.     -moz-border-radius: 4px;
  223.     border-radius: 4px;
  224. }
  225. .drop-down-container.normal ul li a:hover{
  226.     background-color:#299300;
  227.     color:#fff;
  228. }
  229.  
  230. /*============================================================================================*/
  231. /* 2.  COMMON  */
  232. /*============================================================================================*/
  233.  
  234. .megamenu iframe{
  235.         border:0;
  236.         margin-bottom:20px;
  237.         width:100%;
  238.     }
  239. .megamenu hr {
  240.   margin: 0  0 20px 0 ;
  241.   border: 0;
  242.   border-top: 1px solid #299300;
  243.   border-bottom: 1px solid #299300;
  244. }
  245. .megamenu > li .drop-down-container a {
  246.     color:#12b0e6;
  247. }
  248. .megamenu > li .drop-down-container a:hover {
  249.     color:#fff;
  250.     text-decoration:none;
  251. }
  252. .megamenu > li .drop-down-container ul.list-menu {
  253.     margin-left:0;
  254.     padding-left:5px;
  255.     margin-bottom:20px;
  256. }
  257. .megamenu > li .drop-down-container ul.list-menu li {
  258.     background:url(../img/arrow-2.png) no-repeat center left;
  259.     padding-left:12px;
  260. }
  261.  h5 em {
  262.     display:block;
  263.     font-weight:normal;
  264.     color:#999;
  265.     font-size:12px;
  266. }
  267.  
  268. /*============================================================================================*/
  269. /* 3.  TABS   */
  270. /*============================================================================================*/
  271.     ul.tabs {
  272.         list-style: none;
  273.         border-bottom: 2px solid #299300;
  274.         margin-bottom:15px;
  275.         padding-bottom:0;
  276.         display:block;
  277.     }
  278.     ul.tabs li {
  279.         display: inline;
  280.         float:left;
  281.         width:auto;
  282.         white-space:nowrap;
  283.         margin-right:10px;
  284.     }
  285.     ul.tabs li a {
  286.     color: #ffffff;
  287.     position:relative;
  288.     float:left;
  289.     background-color: #299300;
  290.     -webkit-border-top-left-radius: 3px;
  291.     -webkit-border-top-right-radius: 3px;
  292.     -moz-border-radius-topleft: 3px;
  293.     -moz-border-radius-topright: 3px;
  294.     border-top-left-radius: 3px;
  295.     border-top-right-radius: 3px;
  296.     font: bold;
  297.     text-transform:none;
  298.     padding: 4px 18px;
  299.     margin:0;
  300.     font-weight:700;
  301.     -webkit-transition: background-color 0.3s;
  302.     -moz-transition: background-color 0.3s;
  303.     -o-transition: background-color 0.3s;
  304.     -ms-transition: background-color 0.3s;
  305.     transition: background-color 0.3s;
  306.     }
  307.  
  308.     ul.tabs li a.active {background-color: #299300; color:#fff; text-decoration:none; }
  309.     ul.tabs-content { margin: 0 0 10px 0; display: block; }
  310.     ul.tabs-content > li { display:none;}
  311.     ul.tabs-content > li.active { display: block; text-decoration:none;}
  312.  
  313.     /* Clearfixing tabs for beautiful stacking */
  314.     ul.tabs:before,
  315.     ul.tabs:after {
  316.       content: '\0020';
  317.       display: block;
  318.       overflow: hidden;
  319.       visibility: hidden;
  320.       width: 0;
  321.       height: 0; }
  322.     ul.tabs:after {
  323.       clear: both; }
  324.     ul.tabs {
  325.       zoom: 1; }
  326.  
  327.  
  328. /*============================================================================================*/
  329. /* 4.  MEDIA QUERIES  */
  330. /*============================================================================================*/
  331.  
  332. @media (min-width: 980px) and (max-width: 1200px) {
  333. .megamenu_container {
  334.         width:970px;
  335.         margin:auto;
  336.         left:auto;
  337.         top:auto;
  338.     }
  339. .megamenu > li .drop-down-container {width: 940px;}
  340.  
  341. }
  342.  
  343. @media only screen and (max-width: 980px) {
  344.  
  345. a#megamenu-button-mobile {display:block; padding-left:10px;}
  346.  
  347. .megamenu_container {
  348.     width:755px;
  349.     height:auto;
  350.     margin:auto;
  351.     position:relative;
  352.     left:auto;
  353.     top:auto;
  354. }
  355. .megamenu > li .drop-down-container {
  356.     position:absolute;
  357.     top:auto;
  358.     width: 725px;
  359.     margin:0 0 0 0;
  360.     -webkit-border-bottom-right-radius: 5px;
  361.     -webkit-border-bottom-left-radius: 5px;
  362.     -moz-border-radius-bottomright: 5px;
  363.     -moz-border-radius-bottomleft: 5px;
  364.     border-bottom-right-radius: 5px;
  365.     border-bottom-left-radius: 5px;
  366. }
  367. .megamenu img {
  368.     max-width: 98%;
  369.     height: auto;
  370.     width: auto\9; /* ie8 */
  371. }
  372. .megamenu embed,
  373. .megamenu object,
  374. .megamenu iframe {width: 100%;}
  375.  
  376. .megamenu > li {
  377.     float:none;
  378.     width:auto;
  379.     border:none;
  380.     display: block;
  381.     padding: 0;
  382. }
  383.  
  384. .megamenu > li a.drop-down ,
  385. .megamenu > li a.nodrop-down  {
  386.     background-position:99% 18px;
  387.     line-height:12px;
  388.     padding-top:14px;
  389.     padding-bottom: 14px;
  390.     padding-left:12px;
  391.     display:block;
  392. }
  393. .megamenu {display:none;}
  394.  
  395. /* normal dropwn v.1.3 */
  396. .megamenu > li .drop-down-container.normal {
  397.      position:relative;
  398.      top:0; left:0px;
  399.      float:none;
  400.     display: none;
  401.     padding:0;
  402.     margin:0 0 0 0;
  403.     background:none;
  404.     background:#299300;
  405.     width:755px;
  406.     -webkit-border-bottom-right-radius: 0;
  407.     -webkit-border-bottom-left-radius: 0;
  408.     -moz-border-radius-bottomright: 0;
  409.     -moz-border-radius-bottomleft: 0;
  410.     border-bottom-right-radius:0;
  411.     border-bottom-left-radius: 0;
  412.     border-top:none;
  413. }
  414.  
  415. .drop-down-container.normal ul { margin:0; padding:0;}
  416. .drop-down-container.normal ul li  { border-bottom:1px solid #2da7d0; padding:0; margin:0; background:none;  }
  417. .drop-down-container.normal ul li a {width:auto; background:none; color:#fff; margin:0; padding:5px; padding-left:15px; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
  418. .drop-down-container.normal ul li a:hover {background:#2d343e; color:#fff;}
  419.  
  420. }
  421.  
  422. @media only screen and (max-width: 767px) {
  423.  
  424. .megamenu_container{
  425.     width:100%;
  426.     margin:auto;
  427.     left:auto;
  428.     top:auto;
  429.     }
  430.  
  431. .megamenu > li .drop-down-container.normal {
  432.      position: inherit;
  433.      top:0; left:0px;
  434.     display: none;
  435.     width:100%;
  436.     padding-top:0;
  437.     padding-bottom:0;
  438.     background:none;
  439.     height:100%;
  440. }
  441.  
  442. .megamenu > li .drop-down-container {width:auto;}
  443.  
  444. .megamenu > li .drop-down-container#icon-menu {
  445.     width:100%;
  446.     padding:0;
  447.     padding-top:25px;
  448. }
  449.  
  450. .megamenu > li .drop-down-container#icon-menu .span3 {
  451.     margin:0;
  452.     margin: 0 10px 0 15px;
  453.     width:auto;
  454. }
  455.  
  456. .megamenu > li{
  457.     float:none;
  458.     width:auto;
  459.     border:none;
  460.     display: block;
  461.     padding: 0;
  462.     }
  463.  
  464. .megamenu > li a.drop-down,
  465. .megamenu > li a.nodrop-down {
  466.     background-position:99% 18px;
  467.     line-height:12px;
  468.     padding-top:14px;
  469.     padding-bottom: 14px;
  470. }
  471. /* normal dropwn v.1.3 */
  472. .megamenu > li .drop-down-container.normal {
  473.      position:relative;
  474.      top:0; left:0px;
  475.      float:none;
  476.     display: none;
  477.     padding-top:0;
  478.     padding-left:0;
  479.     background:#299300;
  480.     width:100%;
  481.     -webkit-border-bottom-right-radius: 0;
  482.     -webkit-border-bottom-left-radius: 0;
  483.     -moz-border-radius-bottomright: 0;
  484.     -moz-border-radius-bottomleft: 0;
  485.     border-bottom-right-radius:0;
  486.     border-bottom-left-radius: 0;
  487.     border-top:none;
  488. }
  489.  
  490. .drop-down-container.normal ul { margin:0; padding:0;}
  491. .drop-down-container.normal ul li  { border-bottom:1px solid #299300; padding:0; margin:0; background:none;  }
  492. .drop-down-container.normal ul li a {width:auto; background:none; color:#fff; margin:0; padding:5px; padding-left:15px; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
  493. .drop-down-container.normal ul li a:hover {background:#299300; color:#fff;}
  494.  
  495. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!