<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free RedQ Megamenu open source mega menu built with twitter bootstrap 3.2.0 MIT License pixxmar studio. twitter bootstrap snippent. menu plugin. megamenu"> <meta property="og:description" content="megamenu bootstrap3 megamenu, responsive megamenu Free RedQ Megamenu open source mega menu built with twitter bootstrap 3.2.0 MIT License pixxmar studio. twitter bootstrap snippent. menu plugin. megamenu" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript, twitter bootstrap, mega menu, redq megamenu, bootstrap megamenu"> <meta name="author" content="Faysal Haque"> <title>RedQ | Mega Menu</title> <!-- Google Fonts API --> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- Font Awesome --> <link href="css/font-awesome.css" rel="stylesheet"> <!-- MAIN STYLE --> <link href="css/animate.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <link href="css/responsive.css" rel="stylesheet"> <link href="css/menu-settings.css" rel="stylesheet"> <link href="css/jquery.mmenu.all.css" rel="stylesheet"> <link href="css/extends.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- HEADER --> <header id="header"> <div id="mega-menu" class="header header-sticky primary-menu icons-no default-skin fadeInUp align-right"> <div class="container"> <div class="row"> <nav class="navbar navbar-default redq" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand large" href="#"><i class="fa fa-send"></i> Red<span class="logo-style">Q</span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> --> <div class="collapse navbar-collapse"> <a class="navbar-brand mobile pull-left" href="#"><i class="fa fa-send"></i> Red<span class="logo-style">Q</span></a> <a class="mobile-menu-close"><i class="fa fa-random"></i></a> <ul class="nav navbar-nav nav-list"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bolt"></i> <span class="link-item">Home</span><em class="menu-ribbon">New</em></a> <ul class="sub-menu"> <li><a href="#">Home One: Landing</a></li> <li><a href="#">Home Two: Eyegasm</a></li> <li><a href="#">Home Three: Agency</a></li> <li><a href="#">Home Four: Corporate</a></li> <li><a href="#">Home Five: One Page Wonder</a></li> <li><a href="#">Home Six: Classic</a></li> <li><a href="#">Home Seven: Shop</a></li> <li><a href="#">Home Eight: Naked</a></li> </ul> </li> <li class="dropdown redq-halfwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-cogs"></i> <span class="link-item"> Portfolio </span></a> <ul class="dropdown-menu"> <li> <!-- Content container to add padding --> <!-- <div class="redq-content"> --> <ul class="columns col-lg-6 col-sm-6 list-unstyled"> <li> <ul> <li> <a href="#">Two Column: Standard</a> </li> <li> <a href="#">Two Column: Gallery</a> </li> <li> <a href="#">Three Column: Standard</a> </li> <li> <a href="#">Three Column: Gallery</a> </li> <li> <a href="#">Four Column: Standard</a> </li> <li> <a href="#">Four Column: Gallery</a> </li> <li> <a href="#">Masonry: Standard</a> </li> <li> <a href="#">Masonry: Gallery</a> </li> </ul> </li> </ul> <ul class="columns col-lg-6 col-sm-6 list-unstyled"> <li> <ul> <li> <a href="#">Full Width: Standard</a> </li> <li> <a href="#">Full Width: Gallery</a> </li> <li> <a href="#">Single: Standard Full Width</a> </li> <li> <a href="#">Single: Standard Full</a> </li> <li> <a href="#">Single: Standard Split</a> </li> <li> <a href="#">Single: Standard Slideshow</a> </li> <li> <a href="#">Single: Page Builder</a> </li> </ul> </li> </ul> <!-- </div> --> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cloud"></i> <span class="link-item"> Dropdown</span></a> <ul class="sub-menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li class="dropdown"> <a href="#">Menu Item 3</a> <ul class="sub-menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li class="dropdown"> <a href="#">Menu Item 3</a> <ul class="sub-menu"> <li class="dropdown"> <a href="#">Menu Item 1</a> <ul class="sub-menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul> </li> <li class="dropdown"> <a href="#">Menu Item 2</a> <ul class="sub-menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown redq-fullwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-life-ring"></i> <span class="link-item"> Dropdown + Description</span></a> <ul class="dropdown-menu"> <!-- <div class="redq-content"> --> <ul class="columns col-lg-4 list-unstyled"> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> </ul> <ul class="columns col-lg-4 list-unstyled"> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> </ul> <ul class="columns col-lg-4 list-unstyled"> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> <li> <ul> <li> <a href="#"> <span class="redq-link-title">Tuesday</span> <span class="redq-item-description">A little bit of everything.</span> </a> </li> </ul> </li> </ul> <!-- </div> --><!-- end .redq-content --> </ul> </li> <li class="dropdown redq-fullwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bar-chart-o"></i> <span class="link-item"> List </span></a> <ul class="dropdown-menu"> <li> <!-- Content container to add padding --> <!-- <div class="redq-content"> --> <ul class="columns col-lg-3 list-unstyled"> <li> <ul> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> </ul> </li> </ul> <ul class="columns col-lg-3 list-unstyled"> <li> <ul> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> </ul> </li> </ul> <ul class="columns col-lg-3 list-unstyled"> <li> <ul> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> </ul> </li> </ul> <ul class="columns col-lg-3 list-unstyled"> <li> <ul> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> <li> <a href="#">Lorem Ipsum</a> </li> </ul> </li> </ul> <!-- </div> --> </li> </ul> </li> <li class="dropdown redq-fullwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i> <span class="link-item"> Grid </span></a> <ul class="dropdown-menu"> <li> <div class="container"> <div class="row show-grid"> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> <div class="col-lg-1"> grid 1 </div> </div><!-- end .row --> <div class="row show-grid"> <div class="col-lg-2"> grid 2 </div> <div class="col-lg-2"> grid 2 </div> <div class="col-lg-2"> grid 2 </div> <div class="col-lg-2"> grid 2 </div> <div class="col-lg-2"> grid 2 </div> <div class="col-lg-2"> grid 2 </div> </div><!-- end .row --> <div class="row show-grid"> <div class="col-lg-3"> grid 3 </div> <div class="col-lg-3"> grid 3 </div> <div class="col-lg-3"> grid 3 </div> <div class="col-lg-3"> grid 3 </div> </div><!-- end .row --> <div class="row show-grid"> <div class="col-lg-4"> grid 4 </div> <div class="col-lg-4"> grid 4 </div> <div class="col-lg-4"> grid 4 </div> </div><!-- end .row --> <div class="row show-grid"> <div class="col-lg-6"> grid 6 </div> <div class="col-lg-6"> grid 6 </div> </div><!-- end .row --> <div class="row show-grid"> <div class="col-lg-12"> grid 12 </div> </div><!-- end .row --> </div><!-- end .redq-content --> </li> </ul><!-- end .dropdown-menu --> </li><!-- end .dropdown --> <li class="dropdown redq-fullwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-rocket"></i> <span class="link-item"> Widget </span></a> <ul class="dropdown-menu"> <li> <div class="container"> <div class="row"> <div class="col-lg-3"> <!-- <h3> <span class="redq-link-title">Shop Page</span> </h3> --> <h3 class="redq-menu-title"> <span>Shop Page</span> </h3> <ul class="dropdown-submenu"> <li><a href="#">Shop with left sidebar</a></li> <li><a href="#">Shop with right sidebar</a></li> <li><a href="#">Shop with no sidebar</a></li> </ul> </div> <div class="col-lg-3"> <h3 class="redq-menu-title"> <span>Best Sellers</span> </h3> <ul class="widget-list widget-best-sellers"> <li class="clearfix"> <figure> <a href="#"> <img src="images/IMG_6593.jpg" alt="sneakers"> </a> </figure> <div class="product-details"> <h5><a href="#">Jeans Cap</a> </h5> <span class="product-cats"> <a href="#" >Cap</a>, <a href="#" >Jeans</a> </span> <span class="price"> <ins> <span class="amount">£90.00</span> </ins> </span> </div> </li> <li class="clearfix"> <figure> <a href="#"> <img src="images/1-3166.jpg" alt="Hoodie"> </a> </figure> <div class="product-details"> <h5><a href="#">Cotton Hoodie</a> </h5> <span class="product-cats"> <a href="#">Women</a>, <a href="#">Hoddie</a> </span> <span class="price"> <span class="amount">£260.00</span> </span> </div> </li> <li class="clearfix"> <figure> <a href="#"> <img src="images/20110115-futb.jpg" alt="T Shirt Men"> </a> </figure> <div class="product-details"> <h5><a href="#">T-Shirt Men</a> </h5> <span class="product-cats"> <a href="#">T-Shirt</a>, <a href="#">Men</a> </span> <span class="price"> <del> <span class="amount">£460.00</span> </del> <ins> <span class="amount">£395.00</span> </ins> </span> </div> </li> </ul><!-- end .widget-list --> </div> <div class="col-lg-6"> <h3 class="redq-menu-title"> <span>Video Widget</span> </h3> <div class="widget widget-video video-embed"> <iframe src="//player.vimeo.com/video/31743791?title=0&byline=0&portrait=0&color=78fab7" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div><!-- end .widget --> </div> </div><!-- end .row --> </div><!-- end .container --> </li> </ul><!-- end .dropdown-menu --> </li><!-- end .dropdown --> <li class="dropdown redq-fullwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-tasks"></i><span class="link-item"> Icon </span></a> <ul class="dropdown-menu"> <li> <!-- Content container to add padding --> <!-- <div class="redq-content"> --> <ul class="columns col-lg-4 col-sm-4 list-unstyled"> <li> <ul> <li> <a href="#"><i class="fa fa-life-ring"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-university"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-cubes"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-tasks"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-briefcase"></i> Lorem Ipsum</a> </li> </ul> </li> </ul> <ul class="columns col-lg-4 col-sm-4 list-unstyled"> <li> <ul> <li> <a href="#"><i class="fa fa-globe"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-database"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-codepen"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-bar-chart-o"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-sliders"></i> Lorem Ipsum</a> </li> </ul> </li> </ul> <ul class="columns col-lg-4 col-sm-4 list-unstyled"> <li> <ul> <li> <a href="#"><i class="fa fa-cloud"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-pencil-square-o"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-paper-plane-o"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-picture-o"></i> Lorem Ipsum</a> </li> <li> <a href="#"><i class="fa fa-calendar"></i> Lorem Ipsum</a> </li> </ul> </li> </ul> <!-- </div> --> </li> </ul> </li> <li class="dropdown redq-fullwidth"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list-alt"></i> <span class="link-item"> Picture </span></a> <ul class="dropdown-menu"> <li> <!-- Content container to add padding --> <!-- <div class="redq-content"> --> <ul class="thumbnails col-lg-2 col-sm-2 list-unstyled"> <li> <ul> <li> <a class="thumbnail" href="#"> <img alt="150x90" data-src="holder.js/150x90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABaCAYAAABaK68tAAAFFUlEQVR4Xu2cV0skURCFa8xZMQd8ERWMqJhA0b+ugiiYURQTZsWMOTu750I3g7ujg3ihpjwXRGe6u7rqnI+61f1g5OLiIipcVOCHFYgQrB9WlOGcAgSLIHhRgGB5kZVBCRYZ8KIAwfIiK4MSLDLgRQGC5UVWBiVYZMCLAgTLi6wMSrDIgBcFCJYXWRmUYJEBLwoQLC+yMijBIgNeFCBYXmRlUIJFBrwoQLC8yMqgBIsMeFGAYHmRlUEJFhnwogDB8iIrgxIsMuBFAYLlRVYGJVhkwIsCBMuLrAxKsMiAFwUIlhdZGZRgkQEvChAsL7IyKMEiA14UIFheZGVQgkUGvChAsLzIyqAEiwx4UYBgeZGVQQkWGfCiAMHyIiuDEiwy4EUBguVFVgY1D9br66uMj49LVVWVNDY2Osff3t5kcXFRXl5eJDU1Nfyuo6ND0tPT5ezsTJaWliQajUpOTo50dnZKRkbGl7QcHR3J+vq6i19QUCAtLS2SlZXlrvtuzC9vqvQEs2ABmr//w152d3fl6upKKioqpK2tzdkA2MbGxuT9/T20JRKJyMDAgINiYmLCfZ+ZmSlPT08ODhzDOfEWwJmfn3eHAeHz83N43f39/bdiKmUmobTMgnV+fi5zc3OhCLFg3d7eyuTkpOso6GSxa3NzU7a2tqSurs79ALK7uzvp6emR/f19ub6+lrKyMqmvr5eFhQVBLPx9cnIix8fHYUzcGzl0d3e73/FiFhYWJmRUsp1kFqxgyzs9PXXbWixY6GSzs7POq7S0NLcdArLi4mJZW1tzXS6ALvZzdna2TE9Pu85VU1PjQMO1Q0NDMjU15SADSEVFRbK8vCyHh4cuzs3NTdyYH8FONoDi5WsaLBQdQBQLFroHOhOgwEz1+PjoYBkcHHTAoUP19fVJfn7+P6Ctrq7K3t5eqGcAUtDpsH2WlJQI5i3MaABre3v705hWYIqt41eChbkJMGF2AgjBdgcILi8vXadpbW2VyspK2djYcGAEHQywjIyMhAN6b2+v0xOzGaDEPBe7EolJsJJQgf91LGx12J4aGhrcoA0gcB6eCoOBv7m5Waqrq2VmZsbBhmOlpaWys7PjnvyC1d/fL3l5efLw8OBgRRdEp8NTJ+YudDT8xj3jxUxCWb9M+Vd2rGD+ARCYq2A6tkLMShjOMXhjiwRYACklJUWGh4cdOBj60bXwOgHnBk+M2B4xj+Xm5rrhHl0OkOE6gBkvZvC640unkuyEXwMWhmRsS1jYCtGJ8BogWEE3weeVlRU5ODgIj7W3t0t5eXnYvQBcU1OTjI6OulcXeCqsra11gz06YbC6urocuJ/FTDJeEk7XPFifKYHtC7MRnvY+do7gGDoSnhwTXbgO78fwYvXje6/vxkz03prO+9VgaTLCWi4Ey5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqecPUYRTMlHfzDYAAAAASUVORK5CYII=" style="width: 150px; height: 90px;"> </a> </li> </ul> </li> </ul> <ul class="thumbnails col-lg-2 col-sm-2 list-unstyled"> <li> <ul> <li> <a class="thumbnail" href="#"> <img alt="150x90" data-src="holder.js/150x90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABaCAYAAABaK68tAAAFFUlEQVR4Xu2cV0skURCFa8xZMQd8ERWMqJhA0b+ugiiYURQTZsWMOTu750I3g7ujg3ihpjwXRGe6u7rqnI+61f1g5OLiIipcVOCHFYgQrB9WlOGcAgSLIHhRgGB5kZVBCRYZ8KIAwfIiK4MSLDLgRQGC5UVWBiVYZMCLAgTLi6wMSrDIgBcFCJYXWRmUYJEBLwoQLC+yMijBIgNeFCBYXmRlUIJFBrwoQLC8yMqgBIsMeFGAYHmRlUEJFhnwogDB8iIrgxIsMuBFAYLlRVYGJVhkwIsCBMuLrAxKsMiAFwUIlhdZGZRgkQEvChAsL7IyKMEiA14UIFheZGVQgkUGvChAsLzIyqAEiwx4UYBgeZGVQQkWGfCiAMHyIiuDEiwy4EUBguVFVgY1D9br66uMj49LVVWVNDY2Osff3t5kcXFRXl5eJDU1Nfyuo6ND0tPT5ezsTJaWliQajUpOTo50dnZKRkbGl7QcHR3J+vq6i19QUCAtLS2SlZXlrvtuzC9vqvQEs2ABmr//w152d3fl6upKKioqpK2tzdkA2MbGxuT9/T20JRKJyMDAgINiYmLCfZ+ZmSlPT08ODhzDOfEWwJmfn3eHAeHz83N43f39/bdiKmUmobTMgnV+fi5zc3OhCLFg3d7eyuTkpOso6GSxa3NzU7a2tqSurs79ALK7uzvp6emR/f19ub6+lrKyMqmvr5eFhQVBLPx9cnIix8fHYUzcGzl0d3e73/FiFhYWJmRUsp1kFqxgyzs9PXXbWixY6GSzs7POq7S0NLcdArLi4mJZW1tzXS6ALvZzdna2TE9Pu85VU1PjQMO1Q0NDMjU15SADSEVFRbK8vCyHh4cuzs3NTdyYH8FONoDi5WsaLBQdQBQLFroHOhOgwEz1+PjoYBkcHHTAoUP19fVJfn7+P6Ctrq7K3t5eqGcAUtDpsH2WlJQI5i3MaABre3v705hWYIqt41eChbkJMGF2AgjBdgcILi8vXadpbW2VyspK2djYcGAEHQywjIyMhAN6b2+v0xOzGaDEPBe7EolJsJJQgf91LGx12J4aGhrcoA0gcB6eCoOBv7m5Waqrq2VmZsbBhmOlpaWys7PjnvyC1d/fL3l5efLw8OBgRRdEp8NTJ+YudDT8xj3jxUxCWb9M+Vd2rGD+ARCYq2A6tkLMShjOMXhjiwRYACklJUWGh4cdOBj60bXwOgHnBk+M2B4xj+Xm5rrhHl0OkOE6gBkvZvC640unkuyEXwMWhmRsS1jYCtGJ8BogWEE3weeVlRU5ODgIj7W3t0t5eXnYvQBcU1OTjI6OulcXeCqsra11gz06YbC6urocuJ/FTDJeEk7XPFifKYHtC7MRnvY+do7gGDoSnhwTXbgO78fwYvXje6/vxkz03prO+9VgaTLCWi4Ey5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqecPUYRTMlHfzDYAAAAASUVORK5CYII=" style="width: 150px; height: 90px;"> </a> </li> </ul> </li> </ul> <ul class="thumbnails col-lg-2 col-sm-2 list-unstyled"> <li> <ul> <li> <a class="thumbnail" href="#"> <img alt="150x90" data-src="holder.js/150x90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABaCAYAAABaK68tAAAFFUlEQVR4Xu2cV0skURCFa8xZMQd8ERWMqJhA0b+ugiiYURQTZsWMOTu750I3g7ujg3ihpjwXRGe6u7rqnI+61f1g5OLiIipcVOCHFYgQrB9WlOGcAgSLIHhRgGB5kZVBCRYZ8KIAwfIiK4MSLDLgRQGC5UVWBiVYZMCLAgTLi6wMSrDIgBcFCJYXWRmUYJEBLwoQLC+yMijBIgNeFCBYXmRlUIJFBrwoQLC8yMqgBIsMeFGAYHmRlUEJFhnwogDB8iIrgxIsMuBFAYLlRVYGJVhkwIsCBMuLrAxKsMiAFwUIlhdZGZRgkQEvChAsL7IyKMEiA14UIFheZGVQgkUGvChAsLzIyqAEiwx4UYBgeZGVQQkWGfCiAMHyIiuDEiwy4EUBguVFVgY1D9br66uMj49LVVWVNDY2Osff3t5kcXFRXl5eJDU1Nfyuo6ND0tPT5ezsTJaWliQajUpOTo50dnZKRkbGl7QcHR3J+vq6i19QUCAtLS2SlZXlrvtuzC9vqvQEs2ABmr//w152d3fl6upKKioqpK2tzdkA2MbGxuT9/T20JRKJyMDAgINiYmLCfZ+ZmSlPT08ODhzDOfEWwJmfn3eHAeHz83N43f39/bdiKmUmobTMgnV+fi5zc3OhCLFg3d7eyuTkpOso6GSxa3NzU7a2tqSurs79ALK7uzvp6emR/f19ub6+lrKyMqmvr5eFhQVBLPx9cnIix8fHYUzcGzl0d3e73/FiFhYWJmRUsp1kFqxgyzs9PXXbWixY6GSzs7POq7S0NLcdArLi4mJZW1tzXS6ALvZzdna2TE9Pu85VU1PjQMO1Q0NDMjU15SADSEVFRbK8vCyHh4cuzs3NTdyYH8FONoDi5WsaLBQdQBQLFroHOhOgwEz1+PjoYBkcHHTAoUP19fVJfn7+P6Ctrq7K3t5eqGcAUtDpsH2WlJQI5i3MaABre3v705hWYIqt41eChbkJMGF2AgjBdgcILi8vXadpbW2VyspK2djYcGAEHQywjIyMhAN6b2+v0xOzGaDEPBe7EolJsJJQgf91LGx12J4aGhrcoA0gcB6eCoOBv7m5Waqrq2VmZsbBhmOlpaWys7PjnvyC1d/fL3l5efLw8OBgRRdEp8NTJ+YudDT8xj3jxUxCWb9M+Vd2rGD+ARCYq2A6tkLMShjOMXhjiwRYACklJUWGh4cdOBj60bXwOgHnBk+M2B4xj+Xm5rrhHl0OkOE6gBkvZvC640unkuyEXwMWhmRsS1jYCtGJ8BogWEE3weeVlRU5ODgIj7W3t0t5eXnYvQBcU1OTjI6OulcXeCqsra11gz06YbC6urocuJ/FTDJeEk7XPFifKYHtC7MRnvY+do7gGDoSnhwTXbgO78fwYvXje6/vxkz03prO+9VgaTLCWi4Ey5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqecPUYRTMlHfzDYAAAAASUVORK5CYII=" style="width: 150px; height: 90px;"> </a> </li> </ul> </li> </ul> <ul class="thumbnails col-lg-2 col-sm-2 list-unstyled"> <li> <ul> <li> <a class="thumbnail" href="#"> <img alt="150x90" data-src="holder.js/150x90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABaCAYAAABaK68tAAAFFUlEQVR4Xu2cV0skURCFa8xZMQd8ERWMqJhA0b+ugiiYURQTZsWMOTu750I3g7ujg3ihpjwXRGe6u7rqnI+61f1g5OLiIipcVOCHFYgQrB9WlOGcAgSLIHhRgGB5kZVBCRYZ8KIAwfIiK4MSLDLgRQGC5UVWBiVYZMCLAgTLi6wMSrDIgBcFCJYXWRmUYJEBLwoQLC+yMijBIgNeFCBYXmRlUIJFBrwoQLC8yMqgBIsMeFGAYHmRlUEJFhnwogDB8iIrgxIsMuBFAYLlRVYGJVhkwIsCBMuLrAxKsMiAFwUIlhdZGZRgkQEvChAsL7IyKMEiA14UIFheZGVQgkUGvChAsLzIyqAEiwx4UYBgeZGVQQkWGfCiAMHyIiuDEiwy4EUBguVFVgY1D9br66uMj49LVVWVNDY2Osff3t5kcXFRXl5eJDU1Nfyuo6ND0tPT5ezsTJaWliQajUpOTo50dnZKRkbGl7QcHR3J+vq6i19QUCAtLS2SlZXlrvtuzC9vqvQEs2ABmr//w152d3fl6upKKioqpK2tzdkA2MbGxuT9/T20JRKJyMDAgINiYmLCfZ+ZmSlPT08ODhzDOfEWwJmfn3eHAeHz83N43f39/bdiKmUmobTMgnV+fi5zc3OhCLFg3d7eyuTkpOso6GSxa3NzU7a2tqSurs79ALK7uzvp6emR/f19ub6+lrKyMqmvr5eFhQVBLPx9cnIix8fHYUzcGzl0d3e73/FiFhYWJmRUsp1kFqxgyzs9PXXbWixY6GSzs7POq7S0NLcdArLi4mJZW1tzXS6ALvZzdna2TE9Pu85VU1PjQMO1Q0NDMjU15SADSEVFRbK8vCyHh4cuzs3NTdyYH8FONoDi5WsaLBQdQBQLFroHOhOgwEz1+PjoYBkcHHTAoUP19fVJfn7+P6Ctrq7K3t5eqGcAUtDpsH2WlJQI5i3MaABre3v705hWYIqt41eChbkJMGF2AgjBdgcILi8vXadpbW2VyspK2djYcGAEHQywjIyMhAN6b2+v0xOzGaDEPBe7EolJsJJQgf91LGx12J4aGhrcoA0gcB6eCoOBv7m5Waqrq2VmZsbBhmOlpaWys7PjnvyC1d/fL3l5efLw8OBgRRdEp8NTJ+YudDT8xj3jxUxCWb9M+Vd2rGD+ARCYq2A6tkLMShjOMXhjiwRYACklJUWGh4cdOBj60bXwOgHnBk+M2B4xj+Xm5rrhHl0OkOE6gBkvZvC640unkuyEXwMWhmRsS1jYCtGJ8BogWEE3weeVlRU5ODgIj7W3t0t5eXnYvQBcU1OTjI6OulcXeCqsra11gz06YbC6urocuJ/FTDJeEk7XPFifKYHtC7MRnvY+do7gGDoSnhwTXbgO78fwYvXje6/vxkz03prO+9VgaTLCWi4Ey5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqecPUYRTMlHfzDYAAAAASUVORK5CYII=" style="width: 150px; height: 90px;"> </a> </li> </ul> </li> </ul> <ul class="thumbnails col-lg-2 col-sm-2 list-unstyled"> <li> <ul> <li> <a class="thumbnail" href="#"> <img alt="150x90" data-src="holder.js/150x90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABaCAYAAABaK68tAAAFFUlEQVR4Xu2cV0skURCFa8xZMQd8ERWMqJhA0b+ugiiYURQTZsWMOTu750I3g7ujg3ihpjwXRGe6u7rqnI+61f1g5OLiIipcVOCHFYgQrB9WlOGcAgSLIHhRgGB5kZVBCRYZ8KIAwfIiK4MSLDLgRQGC5UVWBiVYZMCLAgTLi6wMSrDIgBcFCJYXWRmUYJEBLwoQLC+yMijBIgNeFCBYXmRlUIJFBrwoQLC8yMqgBIsMeFGAYHmRlUEJFhnwogDB8iIrgxIsMuBFAYLlRVYGJVhkwIsCBMuLrAxKsMiAFwUIlhdZGZRgkQEvChAsL7IyKMEiA14UIFheZGVQgkUGvChAsLzIyqAEiwx4UYBgeZGVQQkWGfCiAMHyIiuDEiwy4EUBguVFVgY1D9br66uMj49LVVWVNDY2Osff3t5kcXFRXl5eJDU1Nfyuo6ND0tPT5ezsTJaWliQajUpOTo50dnZKRkbGl7QcHR3J+vq6i19QUCAtLS2SlZXlrvtuzC9vqvQEs2ABmr//w152d3fl6upKKioqpK2tzdkA2MbGxuT9/T20JRKJyMDAgINiYmLCfZ+ZmSlPT08ODhzDOfEWwJmfn3eHAeHz83N43f39/bdiKmUmobTMgnV+fi5zc3OhCLFg3d7eyuTkpOso6GSxa3NzU7a2tqSurs79ALK7uzvp6emR/f19ub6+lrKyMqmvr5eFhQVBLPx9cnIix8fHYUzcGzl0d3e73/FiFhYWJmRUsp1kFqxgyzs9PXXbWixY6GSzs7POq7S0NLcdArLi4mJZW1tzXS6ALvZzdna2TE9Pu85VU1PjQMO1Q0NDMjU15SADSEVFRbK8vCyHh4cuzs3NTdyYH8FONoDi5WsaLBQdQBQLFroHOhOgwEz1+PjoYBkcHHTAoUP19fVJfn7+P6Ctrq7K3t5eqGcAUtDpsH2WlJQI5i3MaABre3v705hWYIqt41eChbkJMGF2AgjBdgcILi8vXadpbW2VyspK2djYcGAEHQywjIyMhAN6b2+v0xOzGaDEPBe7EolJsJJQgf91LGx12J4aGhrcoA0gcB6eCoOBv7m5Waqrq2VmZsbBhmOlpaWys7PjnvyC1d/fL3l5efLw8OBgRRdEp8NTJ+YudDT8xj3jxUxCWb9M+Vd2rGD+ARCYq2A6tkLMShjOMXhjiwRYACklJUWGh4cdOBj60bXwOgHnBk+M2B4xj+Xm5rrhHl0OkOE6gBkvZvC640unkuyEXwMWhmRsS1jYCtGJ8BogWEE3weeVlRU5ODgIj7W3t0t5eXnYvQBcU1OTjI6OulcXeCqsra11gz06YbC6urocuJ/FTDJeEk7XPFifKYHtC7MRnvY+do7gGDoSnhwTXbgO78fwYvXje6/vxkz03prO+9VgaTLCWi4Ey5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqecPUYRTMlHfzDYAAAAASUVORK5CYII=" style="width: 150px; height: 90px;"> </a> </li> </ul> </li> </ul> <ul class="thumbnails col-lg-2 col-sm-2 list-unstyled"> <li> <ul> <li> <a class="thumbnail" href="#"> <img alt="150x90" data-src="holder.js/150x90" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABaCAYAAABaK68tAAAFFUlEQVR4Xu2cV0skURCFa8xZMQd8ERWMqJhA0b+ugiiYURQTZsWMOTu750I3g7ujg3ihpjwXRGe6u7rqnI+61f1g5OLiIipcVOCHFYgQrB9WlOGcAgSLIHhRgGB5kZVBCRYZ8KIAwfIiK4MSLDLgRQGC5UVWBiVYZMCLAgTLi6wMSrDIgBcFCJYXWRmUYJEBLwoQLC+yMijBIgNeFCBYXmRlUIJFBrwoQLC8yMqgBIsMeFGAYHmRlUEJFhnwogDB8iIrgxIsMuBFAYLlRVYGJVhkwIsCBMuLrAxKsMiAFwUIlhdZGZRgkQEvChAsL7IyKMEiA14UIFheZGVQgkUGvChAsLzIyqAEiwx4UYBgeZGVQQkWGfCiAMHyIiuDEiwy4EUBguVFVgY1D9br66uMj49LVVWVNDY2Osff3t5kcXFRXl5eJDU1Nfyuo6ND0tPT5ezsTJaWliQajUpOTo50dnZKRkbGl7QcHR3J+vq6i19QUCAtLS2SlZXlrvtuzC9vqvQEs2ABmr//w152d3fl6upKKioqpK2tzdkA2MbGxuT9/T20JRKJyMDAgINiYmLCfZ+ZmSlPT08ODhzDOfEWwJmfn3eHAeHz83N43f39/bdiKmUmobTMgnV+fi5zc3OhCLFg3d7eyuTkpOso6GSxa3NzU7a2tqSurs79ALK7uzvp6emR/f19ub6+lrKyMqmvr5eFhQVBLPx9cnIix8fHYUzcGzl0d3e73/FiFhYWJmRUsp1kFqxgyzs9PXXbWixY6GSzs7POq7S0NLcdArLi4mJZW1tzXS6ALvZzdna2TE9Pu85VU1PjQMO1Q0NDMjU15SADSEVFRbK8vCyHh4cuzs3NTdyYH8FONoDi5WsaLBQdQBQLFroHOhOgwEz1+PjoYBkcHHTAoUP19fVJfn7+P6Ctrq7K3t5eqGcAUtDpsH2WlJQI5i3MaABre3v705hWYIqt41eChbkJMGF2AgjBdgcILi8vXadpbW2VyspK2djYcGAEHQywjIyMhAN6b2+v0xOzGaDEPBe7EolJsJJQgf91LGx12J4aGhrcoA0gcB6eCoOBv7m5Waqrq2VmZsbBhmOlpaWys7PjnvyC1d/fL3l5efLw8OBgRRdEp8NTJ+YudDT8xj3jxUxCWb9M+Vd2rGD+ARCYq2A6tkLMShjOMXhjiwRYACklJUWGh4cdOBj60bXwOgHnBk+M2B4xj+Xm5rrhHl0OkOE6gBkvZvC640unkuyEXwMWhmRsS1jYCtGJ8BogWEE3weeVlRU5ODgIj7W3t0t5eXnYvQBcU1OTjI6OulcXeCqsra11gz06YbC6urocuJ/FTDJeEk7XPFifKYHtC7MRnvY+do7gGDoSnhwTXbgO78fwYvXje6/vxkz03prO+9VgaTLCWi4Ey5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqYdgKTHCWhoEy5qjSuohWEqMsJYGwbLmqJJ6CJYSI6ylQbCsOaqkHoKlxAhraRAsa44qqecPUYRTMlHfzDYAAAAASUVORK5CYII=" style="width: 150px; height: 90px;"> </a> </li> </ul> </li> </ul> <!-- </div> --> </li> </ul> </li> </ul><!-- end .nav .navbar-nav --> </div> <!-- end .navbar-collapse --> <!-- </div> --> <!-- end .container-fluid --> </nav> </div><!-- end .row --> </div><!-- end .container --> </div><!-- end .header --> </header> <section id="container"> <main class="bs-docs-masthead" id="content" role="main"> <div class="container"> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">RedQ</span> <!-- <h1>Bootstrap</h1> --> <p class="lead">The most popular front-end framework for developing responsive, mobile first projects on the web.</p> <p class="lead"> <a href="https://github.com/RedQ/RedQ-Megamenu/archive/master.zip" class="btn btn-outline-inverse btn-lg">Download Megamenu</a> </p> <p class="version">Currently v0.1.0</p> </div> </main> <div class="bs-docs-featurette"> <div class="container"> <!-- <div class="showcase"> </div> --><!-- end .showcase --> <h2 class="bs-docs-featurette-title">Designed for everyone, everywhere.</h2> <p class="lead">A Responsive Megamenu built with bootstrap.</p> <hr class="half-rule"> <div class="row"> <div class="col-sm-4"> <img src="images/compass-logo-1.png" alt="Compass support" class="img-responsive"> <h3>Preprocessors</h3> <p>In addition to vanilla CSS, RedQ Megamenu includes support for the most popular CSS preprocessors, <a href="http://compass-style.org/">Compass</a>.</p> </div> <div class="col-sm-4"> <img src="images/devices.png" alt="Responsive across devices" class="img-responsive"> <h3>One Menu, every device.</h3> <p>RedQ Megamenu easily and efficiently scales your project with one code base, from phones to tablets to desktops.</p> </div> <div class="col-sm-4"> <!-- <img src="assets/img/components.png" alt="Components" class="img-responsive"> --> <h3>Comprehensive docs</h3> <p>With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.</p> </div> </div> <hr class="half-rule"> <p class="lead">RedQ Megamenu is open source. It's hosted, developed, and maintained on GitHub.</p> <a href="https://github.com/RedQ/RedQ-Megamenu/" class="btn btn-outline btn-lg">View the GitHub project</a> </div> </div> </section> <section id="settings-panel"> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="small-wrapper"> <h4>Icons Position</h4> <ul id="menu-icons" class="radio"> <li> <label> <input type="radio" name="change-icons" checked="checked" value="icons-no"> Icons Null </label> </li> <li> <label> <input type="radio" name="change-icons" value="icons-top"> Icons Top </label> </li> <li> <label> <input type="radio" name="change-icons" value="icons-left"> Icons Left </label> </li> <li class="visible-md visible-lg"> <label> <input type="radio" name="change-icons" value="icons-right"> Icons Right </label> </li> </ul> </div> </div> <div class="col-lg-3 hidden-xs hidden-sm"> <div class="small-wrapper"> <h4>Menu Align</h4> <ul id="menu-align" class="radio"> <li> <label> <input type="radio" name="change-align" value="align-left"> Left </label> </li> <li> <label> <input type="radio" name="change-align" value="align-center"> Center </label> </li> <li> <label> <input type="radio" name="change-align" checked="checked" value="align-right"> Right </label> </li> </ul> </div> </div> <div class="col-lg-3 visible-md visible-lg"> <div class="small-wrapper"> <h4>Dropdown Effect</h4> <ul id="menu-animation" class="radio"> <li> <label> <input type="radio" name="change-animation" checked="checked" value="fadeInUp"> fadeInUp </label> </li> <li> <label> <input type="radio" name="change-animation" value="animate-null"> No Animation </label> </li> <li> <label> <input type="radio" name="change-animation" value="bounceInUp"> bounceInUp </label> </li> <li> <label> <input type="radio" name="change-animation" value="fadeInDown"> fadeInDown </label> </li> <li> <label> <input type="radio" name="change-animation" value="flipInX"> flipInX </label> </li> <li> <label> <input type="radio" name="change-animation" value="flipInY"> flipInY </label> </li> <li> <label> <input type="radio" name="change-animation" value="pulse"> pulse </label> </li> <li> <label> <input type="radio" name="change-animation" value="zoomIn"> zoomIn </label> </li> <li> <label> <input type="radio" name="change-animation" value="lightSpeedIn"> lightSpeedIn </label> </li> </ul> </div> </div> <div class="col-lg-3"> <div class="small-wrapper"> <h4>Color Skin</h4> <ul id="color-skins" class="radio"> <li> <label> <input type="radio" name="change-skins" checked="checked" value="default-skin"> <div class="skin-block default-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="green-sea-skin"> <div class="skin-block green-sea-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="pomegranate-skin"> <div class="skin-block pomegranate-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="pumpkin-skin"> <div class="skin-block pumpkin-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="belize-hole-skin"> <div class="skin-block belize-hole-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="nephritis-skin"> <div class="skin-block nephritis-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="orange-skin"> <div class="skin-block orange-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="wisteria-skin"> <div class="skin-block wisteria-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="silver-skin"> <div class="skin-block silver-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="midnight-blue-skin"> <div class="skin-block midnight-blue-bg"></div> </label> </li> <li> <label> <input type="radio" name="change-skins" value="asbestos-skin"> <div class="skin-block asbestos-bg"></div> </label> </li> </ul> </div> </div> </div><!-- end .row --> </div><!-- end .container --> </section> <footer> <div class="container"> <div class="row"> <div id="share-area"> <h4>Share:</h4> <ul class="list-inline"> <li> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-share-button" data-href="http://yellowstring.net/mega-menu/"></div> </li> <li> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yellowstring.net/mega-menu/" data-text="RedQ | Mega Menu - Responsive Mega menu on top of twitter bootstrap 3" data-related="pixxmark_studio" data-hashtags="Megamenu,responsive,bootstrap">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </li> </ul> </div> <hr> <p class="pull-left">All Rights Reserved</p> <p class="pull-right">© RedQ : RedQ Megamenu 2014</p> </div> </div> </footer> <!-- jQuery --> <script src="js/jquery.js"></script> <script src="js/jquery.mmenu.min.all.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- <script src="js/bootstrap.js"></script> --> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.fitvids.js"></script> <script src="js/scripts.js"></script> <script src="js/settings.js"></script> <script type="text/javascript"> $(document).ready(function() { // $('.navbar-toggle').click(function(e){ // e.preventDefault(); // $('.collapse.navbar-collapse').addClass('in'); // $('body').addClass('mobile-menu-open'); // $('.collapse.navbar-collapse').show().prop('id', 'mobile-menu-wrap'); // }); // $('.mobile-menu-close').click(function(e){ // e.preventDefault(); // // $('.collapse.navbar-collapse').removeClass('in'); // $('body').removeClass('mobile-menu-open'); // // $('.collapse.navbar-collapse').removeClass('in').hide(); // }); $('.navbar-toggle').click(function(e){ e.preventDefault(); $('.collapse.navbar-collapse').addClass('in'); $('body').addClass('mobile-menu-open'); $('.collapse.navbar-collapse').show().prop('id', 'mobile-menu-wrap'); }); $('.mobile-menu-close').click(function(e){ e.preventDefault(); // $('.collapse.navbar-collapse').removeClass('in'); $('body').removeClass('mobile-menu-open'); // $('.collapse.navbar-collapse').removeClass('in').hide(); }); // var width = $(window).width(); // console.log('window width: ' + width); // var totalWidth = $('ul.nav').width(); // var listWidth = []; // var totalListWidth = 0; // $('ul.nav > li').each(function(){ // totalListWidth = totalListWidth + $(this).outerWidth(); // listWidth.push($(this).outerWidth()); // }); // console.log('Total list width: ' + totalListWidth); // console.log('list width: ' + listWidth); // console.log('Total width: ' + totalWidth); // if( (totalWidth ) >= width) { // $('body').removeClass('mobile-menu-open'); // $('.collapse.navbar-collapse.in').removeAttr('id'); // $('.collapse.navbar-collapse.in').removeClass('in'); // } else { // $('style').text('@media (min-width:' + width + 'px) {div{ color:red !important; }}'); // } $( window ).resize(function() { var width = $(window).width(); if ((width>=768)) { $('body').removeClass('mobile-menu-open'); $('.collapse.navbar-collapse.in').removeAttr('id'); $('.collapse.navbar-collapse.in').removeClass('in'); } }); }); </script> </body> </html>