CSS   20

Mega menu css

Guest on 29th July 2022 01:19:19 PM

  1. /*
  2.  * 6. MEGA MENU CSS
  3.  * Description: Mega Menu CSS
  4.  */
  5.  
  6. .vd_mega-menu-wrapper{
  7.     width: 100%;
  8.         position: relative;
  9.         z-index: 3;
  10.        
  11.         .vd_mega-menu{
  12.             float:left;
  13.         .mega-ul, .mega-li{
  14.             margin:0;
  15.                 padding:0;         
  16.         }
  17.         .mega-li{
  18.             list-style: none;
  19.         }
  20.         > .mega-ul{
  21.             > li.one-icon, > li.profile{
  22.                 padding:13px 7px 14px;                
  23.             }
  24.            
  25.             > li.one-big-icon, >li.one-icon{
  26.                 > .mega-link{
  27.                     display: block;
  28.                     height: 36px;
  29.                     line-height: 30px;
  30.                     width: 36px;  
  31.                     text-align:center;
  32.                     padding:0;
  33.                     margin:0;
  34.                     overflow:hidden;                    
  35.                     .border-radius(30px);                  
  36.                 }  
  37.             }
  38.             > li.one-big-icon {
  39.                 padding:14px 4px 13px;  
  40.                 > .mega-link{
  41.                 font-size: 24px;
  42.                     > .mega-image{
  43.                         margin-left:5px;
  44.                         margin-right:5px;
  45.                     }
  46.                     > .badge{
  47.                         right:-4px;
  48.                         top:5px;
  49.                     }
  50.                 }
  51.                 .open-left:before{
  52.                     right: 11px;
  53.                 }      
  54.                 .open-right:before{
  55.                     right:auto;
  56.                     left:11px;
  57.                 }    
  58.             }
  59.             > li.profile{
  60.                 margin-left:15px;                
  61.                 .mega-image{
  62.                     float:left;
  63.                 }
  64.                 .mega-name{
  65.                     display:block;
  66.                     float:left;
  67.                     margin-left:10px;
  68.                     margin-top:5px;
  69.                 }                
  70.             }
  71.             .mega-image {
  72.                 height: 36px;
  73.                 line-height: 30px;
  74.                 width: 36px;
  75.                 img{
  76.                     .border-radius(30px);
  77.                     vertical-align:top;
  78.                 }
  79.             }              
  80.             > li.one-icon{
  81.                 > .mega-link{
  82.                     border: 2px solid #EEE;
  83.                     .mega-icon{
  84.                         font-size:16px;
  85.                     }                      
  86.                 }      
  87.                 .mega-link:hover, .mega-link.open    {
  88.                     background-color:@navbar_tabs_menu_color !important;
  89.                     color: @main_color;
  90.                 }                  
  91.             }
  92.                 > .mega-li{
  93.                 float: left;
  94.                 position: relative;
  95.                 margin-left:5px;
  96.                 padding:18px 7px 20px;
  97.                 height: @header_height;
  98.                 > a{
  99.                     padding: 0;
  100.                     color:@top_mega_menu_color;
  101.                 }
  102.                 > a:hover, > a:focus{
  103.                     background:none;
  104.                 }                      
  105.                 .btn{
  106.                     padding: 6px 15px;
  107.                 }
  108.                 .btn-lg{
  109.                     padding: 11px 19px;
  110.                 }
  111.                 .btn-sm{
  112.                     padding: 5px 10px;
  113.                 }
  114.                 .btn-xs{
  115.                     font-size: 11px;
  116.                     padding: 4px 8px;
  117.                 }
  118.                 .caret{
  119.                     border-top-color: #FFFFFF;
  120.                     border-bottom-color: #FFFFFF;
  121.                 }              
  122.                 .badge {
  123.                     position: absolute;
  124.                     right: 4px;
  125.                     top: 4px;
  126.                 }                                    
  127.             } // mega-li  
  128.            
  129.             li.hover-trigger:hover >.hover-target{
  130.                     display:block !important;
  131.             }
  132.             } // mega-ul
  133.     } // .vd_mega-menu
  134. } // .vd_mega-menu-wrapper
  135.  
  136. /* for horizontal menu */
  137. .vd_mega-menu-wrapper.horizontal-menu{
  138.     z-index: 6;
  139.     .vd_mega-menu > .mega-ul  {
  140.         > .mega-li {
  141.             padding: 8px 13px;
  142.             height: 42px;
  143.             margin-top:10px;
  144.             margin-bottom:10px;
  145.             border-radius:4px;
  146.             > a{
  147.                 font-size:14px;
  148.             }    
  149.         }
  150.         > .mega-li:hover, > .mega-li.active {
  151.             background : rgba(0,0,0,.4);
  152.             color: #FFFFFF;
  153.         }
  154.     }    
  155. }
  156.  
  157. // 2nd level menu
  158. .vd_mega-menu-content:before{
  159.         -moz-border-color: none;
  160.         border-color: transparent transparent @mega_menu_border_top_color;
  161.         border-image: none;
  162.         border-style: solid;
  163.         border-width: 5px;
  164.         content: "";
  165.         display: block;
  166.         height: 0;
  167.         opacity: 1;
  168.         width: 0;  
  169.         position:absolute;
  170.         top:-12px;
  171. }
  172.  
  173. .vd_mega-menu-content{
  174.         padding-top: 5px;
  175.         padding-bottom: 15px;
  176.         position: absolute;
  177.         top: 100%;
  178.         display:none;  
  179.         background-color: #FFF;
  180.     .box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  181.         border-top: 3px solid @mega_menu_border_top_color;
  182.         z-index: 5;
  183.     .line{
  184.         border-top:1px solid #EEE;
  185.         margin-top:5px !important;
  186.         margin-bottom:5px !important;
  187.         padding:0 !important;        
  188.     }  
  189.     .closing{
  190.         margin-bottom:-15px;
  191.     }
  192. }
  193. .vd_mega-menu-content.no-top{
  194.     border-top:none;
  195. }
  196. .vd_mega-menu-content.no-top:before{
  197.     border:none;    
  198. }
  199.  
  200. // mega menu content
  201. .vd_mega-menu-content .child-menu{
  202.     position:relative;
  203.     padding:0;
  204.     color:@mega_menu_child_text_color;
  205.     letter-spacing: .3px;
  206.     a{
  207.         color:@mega_menu_child_link_color;  
  208.     }
  209.     .title{
  210.         background:@mega_menu_border_top_color;
  211.         color:#FFF;
  212.         margin-top:-5px;
  213.         padding:0 10px 3px;
  214.         .vd_panel-menu{
  215.             .entypo-icon{
  216.                 font-size:18px;
  217.                 line-height:26px;        
  218.             }
  219.             .smaller-font{
  220.                 font-size:14px;
  221.             }    
  222.         }
  223.     }
  224.     .content{
  225.         padding: 5px 10px;
  226.     }
  227. }
  228.  
  229.  
  230. .closing{
  231.     font-size:11.4px;                            
  232.     background:#F5F5F5 !important;
  233.     position:relative;
  234.     a{
  235.         color:#999 !important;
  236.         display:block;
  237.         padding: 3px 10px 5px;
  238.     }
  239.     a:hover{
  240.         color:@main_color !important;
  241.     }
  242. }  
  243.  
  244. .open-top{
  245.     top:auto;
  246.     bottom:106%;
  247. }
  248. .open-top:before{
  249.     display:none !important;
  250. }
  251.  
  252. .light-top-menu{
  253.    .vd_mega-menu-wrapper{
  254.         .vd_mega-menu{
  255.             > .mega-ul > .mega-li{                
  256.                 .mega-link, .one-icon, .mega-name{
  257.                     border-color:#707e77;
  258.                     color:#707e77;
  259.                 }
  260.             }
  261.         }
  262.    }
  263.    .vd_mega-menu-wrapper.horizontal-menu{
  264.         .vd_mega-menu{
  265.             > .mega-ul > .mega-li{
  266.                 > a{
  267.                     color:#707e77;
  268.                 }    
  269.             }
  270.             .mega-ul > .mega-li:hover, .mega-ul > .mega-li.active {
  271.                 background : @main_color;
  272.                 > a {                    
  273.                     color: #FFFFFF;
  274.                 }
  275.             }            
  276.         }    
  277.    }
  278.    .vd_menu-search{
  279.         background: #333333;
  280.         color:#EEEEEE;
  281.         .vd_menu-search-text{
  282.             background: #333333;  
  283.             color:#EEEEEE;            
  284.         }
  285.    }
  286. }
  287.  
  288. /* Specific Menu Color */
  289. //Mega Menu: Menu Action
  290. .menu-action-icon.vd_green:hover{
  291.     background: @green !important;
  292.     color:@white !important;
  293. }
  294. .menu-action-icon.vd_red:hover{
  295.     background: @red !important;
  296.     color:@white !important;
  297. }
  298. .menu-action-icon.vd_yellow:hover{
  299.     background: @green !important;
  300.     color:@white !important;
  301. }
  302. .menu-action-icon.vd_orange:hover{
  303.     background: @red !important;
  304.     color:@white !important;
  305. }
  306. .menu-action-icon.vd_blue:hover{
  307.     background: @green !important;
  308.     color:@white !important;
  309. }
  310.  
  311.  
  312. /* Mega Menu Width */
  313.  
  314. // Large Screen
  315. .width-lg-1{
  316.     width:@width_1;
  317. }
  318. .width-lg-2{
  319.     width:@width_2;
  320. }
  321. .width-lg-3{
  322.     width:@width_3;
  323. }
  324. .width-lg-4{
  325.     width:@width_4;
  326. }
  327. .width-lg-5{
  328.     width:@width_5;
  329. }
  330. .width-lg-6{
  331.     width:@width_6;
  332. }
  333. .width-lg-full{
  334.     width:@width_full;
  335. }
  336. // Medium Screen
  337. .width-md-1{
  338.     width:@width_1;
  339. }
  340. .width-md-2{
  341.     width:@width_2;
  342. }
  343. .width-md-3{
  344.     width:@width_3;
  345. }
  346. .width-md-4{
  347.     width:@width_4;
  348. }
  349. .width-md-5{
  350.     width:@width_5;
  351. }
  352. .width-md-6{
  353.     width:@width_6;
  354. }
  355. .width-md-full{
  356.     width:@width_full;
  357. }
  358. // Small Screen
  359. .width-sm-1{
  360.     width:@width_1;
  361. }
  362. .width-sm-2{
  363.     width:@width_2;
  364. }
  365. .width-sm-3{
  366.     width:@width_3;
  367. }
  368. .width-sm-4{
  369.     width:@width_4;
  370. }
  371. .width-sm-5{
  372.     width:@width_5;
  373. }
  374. .width-sm-6{
  375.     width:@width_6;
  376. }
  377. .width-sm-full{
  378.     width:@width_full;
  379. }
  380. // Extra Small Screen
  381. .width-xs-1{
  382.     width:@width_1;
  383. }
  384. .width-xs-2{
  385.     width:@width_2;
  386. }
  387. .width-xs-3{
  388.     width:@width_3;
  389. }
  390. .width-xs-4{
  391.     width:@width_4;
  392. }
  393. .width-xs-5{
  394.     width:@width_5;
  395. }
  396. .width-xs-6{
  397.     width:@width_6;
  398. }
  399. .width-xs-full{
  400.     width:@width_full;
  401. }
  402.  
  403. /* Height */
  404. // Large Screen
  405. .height-lg-auto .list-wrapper > li{
  406.     height:auto;
  407. }
  408. .height-lg-1 .list-wrapper > li{
  409.     height:@height_1;
  410. }
  411. .height-lg-2 .list-wrapper > li{
  412.     height:@height_2;
  413. }
  414. .height-lg-3 .list-wrapper > li{
  415.     height:@height_3;
  416. }
  417. .height-lg-4 .list-wrapper > li{
  418.     height:@height_4;
  419. }
  420. .height-lg-5 .list-wrapper > li{
  421.     height:@height_5;
  422. }
  423. .height-lg-6 .list-wrapper > li{
  424.     height:@height_6;
  425. }  
  426. // Medium Screen
  427. .height-md-auto .list-wrapper > li{
  428.     height:auto;
  429. }
  430. .height-md-1 .list-wrapper > li{
  431.     height:@height_1;
  432. }
  433. .height-md-2 .list-wrapper > li{
  434.     height:@height_2;
  435. }
  436. .height-md-3 .list-wrapper > li{
  437.     height:@height_3;
  438. }
  439. .height-md-4 .list-wrapper > li{
  440.     height:@height_4;
  441. }
  442. .height-md-5 .list-wrapper > li{
  443.     height:@height_5;
  444. }
  445. .height-md-6 .list-wrapper > li{
  446.     height:@height_6;
  447. }
  448. // Small Screen
  449. .height-sm-auto .list-wrapper > li{
  450.     height:auto;
  451. }
  452. .height-sm-1 .list-wrapper > li{
  453.     height:@height_1;
  454. }
  455. .height-sm-2 .list-wrapper > li{
  456.     height:@height_2;
  457. }
  458. .height-sm-3 .list-wrapper > li{
  459.     height:@height_3;
  460. }
  461. .height-sm-4 .list-wrapper > li{
  462.     height:@height_4;
  463. }
  464. .height-sm-5 .list-wrapper > li{
  465.     height:@height_5;
  466. }
  467. .height-sm-6 .list-wrapper > li{
  468.     height:@height_6;
  469. }
  470.  
  471. // Extra Small Screen
  472. .height-xs-auto .list-wrapper > li{
  473.     height:auto;
  474. }
  475. .height-xs-1 .list-wrapper > li{
  476.     height:@height_1;
  477. }
  478. .height-xs-2 .list-wrapper > li{
  479.     height:@height_2;
  480. }
  481. .height-xs-3 .list-wrapper > li{
  482.     height:@height_3;
  483. }
  484. .height-xs-4 .list-wrapper > li{
  485.     height:@height_4;
  486. }
  487. .height-xs-5 .list-wrapper > li{
  488.     height:@height_5;
  489. }
  490. .height-xs-6 .list-wrapper > li{
  491.     height:@height_6;
  492. }
  493.  
  494. /* Grid Column */
  495. // Large Screen
  496. .column-lg-1{
  497.     .column-1();      
  498. }  
  499. .column-lg-2{
  500.     .column-2();        
  501. }
  502. .column-lg-3{
  503.     .column-3();    
  504. }
  505. .column-lg-4{
  506.     .column-4();      
  507. }
  508. .column-lg-5{
  509.     .column-5();  
  510. }
  511. .column-lg-6{
  512.     .column-6();    
  513. }
  514. // Medium Screen
  515. .column-md-1{
  516.     .column-1();      
  517. }  
  518. .column-md-2{
  519.     .column-2();        
  520. }
  521. .column-md-3{
  522.     .column-3();    
  523. }
  524. .column-md-4{
  525.     .column-4();      
  526. }
  527. .column-md-5{
  528.     .column-5();  
  529. }
  530. .column-md-6{
  531.     .column-6();    
  532. }
  533. // Small Screen
  534. .column-sm-1{
  535.     .column-1();      
  536. }  
  537. .column-sm-2{
  538.     .column-2();        
  539. }
  540. .column-sm-3{
  541.     .column-3();    
  542. }
  543. .column-sm-4{
  544.     .column-4();      
  545. }
  546. .column-sm-5{
  547.     .column-5();  
  548. }
  549. .column-sm-6{
  550.     .column-6();    
  551. }
  552. // Extra Small Screen
  553. .column-xs-1{
  554.     .column-1();      
  555. }  
  556. .column-xs-2{
  557.     .column-2();        
  558. }
  559. .column-xs-3{
  560.     .column-3();    
  561. }
  562. .column-xs-4{
  563.     .column-4();      
  564. }
  565. .column-xs-5{
  566.     .column-5();  
  567. }
  568. .column-xs-6{
  569.     .column-6();    
  570. }
  571.  
  572. /* Left , Right , Center Position */
  573. // Large Screen
  574. .left-lg{
  575.     .left-mega-menu();
  576. }
  577. .right-lg{
  578.     .right-mega-menu();    
  579. }
  580. .center-lg-1{
  581.     .center-pos(@width_1,@width_extra);
  582. }
  583. .center-lg-2{
  584.     .center-pos(@width_2,@width_extra);
  585. }
  586. .center-lg-3{
  587.     .center-pos(@width_3,@width_extra);
  588. }
  589. .center-lg-4{
  590.     .center-pos(@width_4,@width_extra);
  591. }
  592. .center-lg-5{
  593.     .center-pos(@width_5,@width_extra);
  594. }
  595. .center-lg-6{
  596.     .center-pos(@width_6,@width_extra);
  597. }
  598. .center-lg-full{
  599.     .center-pos(@width_full,@width_extra);
  600. }
  601. // Medium Screen
  602. .left-md{
  603.     .left-mega-menu();  
  604. }
  605. .right-md{
  606.     .right-mega-menu();      
  607. }
  608. .center-md-1{
  609.     .center-pos(@width_1,@width_extra);
  610. }
  611. .center-md-2{
  612.     .center-pos(@width_2,@width_extra);
  613. }
  614. .center-md-3{
  615.     .center-pos(@width_3,@width_extra);
  616. }
  617. .center-md-4{
  618.     .center-pos(@width_4,@width_extra);
  619. }
  620. .center-md-5{
  621.     .center-pos(@width_5,@width_extra);
  622. }
  623. .center-md-6{
  624.     .center-pos(@width_6,@width_extra);
  625. }
  626. .center-md-full{
  627.     .center-pos(@width_full,@width_extra);
  628. }
  629. // Small Screen
  630. .left-sm{
  631.     .left-mega-menu();  
  632. }
  633. .right-sm{
  634.     .right-mega-menu();        
  635. }
  636. .center-sm-1{
  637.     .center-pos(@width_1,@width_extra);
  638. }
  639. .center-sm-2{
  640.     .center-pos(@width_2,@width_extra);
  641. }
  642. .center-sm-3{
  643.     .center-pos(@width_3,@width_extra);
  644. }
  645. .center-sm-4{
  646.     .center-pos(@width_4,@width_extra);
  647. }
  648. .center-sm-5{
  649.     .center-pos(@width_5,@width_extra);
  650. }
  651. .center-sm-6{
  652.     .center-pos(@width_6,@width_extra);
  653. }
  654. .center-sm-5{
  655.     .center-pos(@width_5,@width_extra);
  656. }
  657. .center-sm-6{
  658.     .center-pos(@width_6,@width_extra);
  659. }
  660. .center-sm-full{
  661.     .center-pos(@width_full,@width_extra);
  662. }
  663. // Extra Small Screen
  664. .left-xs{
  665.     .left-mega-menu();    
  666. }
  667. .right-xs{
  668.     .right-mega-menu();    
  669. }
  670. .center-xs-1{
  671.     .center-pos(@width_1,@width_extra);
  672. }
  673. .center-xs-2{
  674.     .center-pos(@width_2,@width_extra);
  675. }
  676. .center-xs-3{
  677.     .center-pos(@width_3,@width_extra);
  678. }
  679. .center-xs-4{
  680.     .center-pos(@width_4,@width_extra);
  681. }
  682. .center-xs-5{
  683.     .center-pos(@width_5,@width_extra);
  684. }
  685. .center-xs-6{
  686.     .center-pos(@width_6,@width_extra);
  687. }
  688. .center-xs-full{
  689.     .center-pos(@width_full,@width_extra);
  690. }
  691.  
  692. .width-full{
  693.     width:@width_full;
  694. }
  695. .parent-width-full{ // class for parent with child .width-full
  696.     position:static !important;                
  697. }
  698. .mgbt-lg-0{
  699.     margin-bottom:0 !important;
  700. }
  701. .mgbt-lg-5{
  702.     margin-bottom:5px !important;
  703. }
  704. .mgbt-lg-10{
  705.     margin-bottom:10px !important;
  706. }
  707. .mgbt-lg-15{
  708.     margin-bottom:15px !important;
  709. }
  710. .mgbt-lg-20{
  711.     margin-bottom:20px !important;
  712. }
  713. .mgbt-md-0{
  714.     margin-bottom:0 !important;
  715. }
  716. .mgbt-md-5{
  717.     margin-bottom:5px !important;
  718. }
  719. .mgbt-md-10{
  720.     margin-bottom:10px !important;
  721. }
  722. .mgbt-md-15{
  723.     margin-bottom:15px !important;
  724. }
  725. .mgbt-md-20{
  726.     margin-bottom:20px !important;
  727. }
  728. .mgbt-sm-0{
  729.     margin-bottom:0 !important;
  730. }
  731. .mgbt-sm-5{
  732.     margin-bottom:5px !important;
  733. }
  734. .mgbt-sm-10{
  735.     margin-bottom:10px !important;
  736. }
  737. .mgbt-sm-15{
  738.     margin-bottom:15px !important;
  739. }
  740. .mgbt-sm-20{
  741.     margin-bottom:20px !important;
  742. }
  743. .mgbt-xs-0{
  744.     margin-bottom:0 !important;
  745. }
  746. .mgbt-xs-5{
  747.     margin-bottom:5px !important;
  748. }
  749. .mgbt-xs-10{
  750.     margin-bottom:10px !important;
  751. }
  752. .mgbt-xs-15{
  753.     margin-bottom:15px !important;
  754. }
  755. .mgbt-xs-20{
  756.     margin-bottom:20px !important;
  757. }
  758. .mgtp--10{
  759.     margin-top:-10px !important;
  760. }
  761. .mgtp--5{
  762.     margin-top:-5px !important;
  763. }
  764. .mgtp-0{
  765.     margin-top:0px !important;
  766. }
  767. .mgtp-5{
  768.     margin-top:5px !important;
  769. }
  770. .mgtp-10{
  771.     margin-top:10px !important;
  772. }
  773. .mgtp-15{
  774.     margin-top:15px !important;
  775. }
  776. .mgtp-20{
  777.     margin-top:20px !important;
  778. }
  779.  
  780. .open-right{
  781.     top:-8px;
  782.     left:100%;
  783. }
  784. .open-left{
  785.     top:-8px;
  786.     right:100%;
  787. }
  788. .open-right:before, .open-left:before{
  789.     border:none;
  790. }

Raw Paste


Login or Register to edit or fork this paste. It's free.