Hi there,
I am wanting to use this scripts for my mega menu.
It is fine and works great in mobile view, but what I would like to do is to have the menu slide out from the left so it is around 80% on screen.
Would this be possiblw with this script?
Thanks!
Hi there,
I have the following Bootstrap menu. What I am trying to do is create a top navigation with a mega menu and then in mobile view, have the menu slide out from the right. It kind of works, but it seems to be opening the menu in the slide out menu on mobile view.
Any ideas what I’ve done wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- // BOOTSTRAP BASE CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- // BOOTSTRAP DEFAULT THEME -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- // Off CANVAS CSS -->
<link rel="stylesheet" href="bootstrap.offcanvas.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body-offcanvas">
<header class="clearfix">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fixed">
<div class="navbar-header">
<a class="navbar-brand" href="#">l</a>
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">
<span class="sr-only">Toggle navigation</span>
<span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
<!-- // MAIN NAV -->
<div class="navbar-offcanvas navbar-offcanvas-touch" id="js-bootstrap-offcanvas">
<nav class="navbar navbar-default megamenu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">Bralnd</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown megamenu-fw">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Mega Menu <span class="caret"></span></a>
<ul class="dropdown-menu megamenu-content" role="menu">
<li>
<div class="row">
<div class="col-sm-4">
1
</div>
<div class="col-sm-4">
2
</div>
<div class="col-sm-4">
3
</div>
</div>
<!-- end row -->
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</div>
<!-- // END MAIN NAV -->
</div>
</nav>
</header>
<!-- // jQUERY -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- // BOOTSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- // OFF CANVAS JS -->
<script src="bootstrap.offcanvas.min.js"></script>
<script>
$(".dropdown").hover(
function() { $('.dropdown-menu', this).fadeIn("fast");
},
function() { $('.dropdown-menu', this).fadeOut("fast");
});
</script>
</body>
</html>Topics merged.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.