Any one can create mega menu like godaddy.com top menu?
Welcome to the forums, @pranabpartha.
Are you asking for help in creating such a menu? If so, please show us the code you have so far. If you have a link to a live page, that would be great; otherwise this post explains alternatives.
Have you looked at the source code? How far have you got with creating this?
1 Like
Yes. I’m asking you to show us the code you have so far. At which point do you need help? You’ll find other members here are very willing to assist, but nobody is going to provide code for you from scratch. You need to show us what you’ve done and we can work from there.
<!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.0">
<meta name="description" content="Yet another megamenu for Bootstrap 3">
<meta name="author" content="@geedmo">
<title>Yamm!3 Megamenu for Bootstrap3</title>
<!-- Bootstrap and demo CSS -->
<link href="demo/components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="demo/components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- <link href="demo/css/demo.css" rel="stylesheet"> -->
<!-- Yamm styles-->
<link href="yamm/yamm.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--if lt IE 9
script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
script(src='https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
-->
</head>
<body>
<!-- Demo navbar -->
<div class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand"> <i class="glyphicon glyphicon-globe"></i></a>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">United State - English<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class=" yamm-content">
<div class="row">
<div class="col-md-12">
<h3> Choose your Country/Region</h3>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<ul class="list-unstyled text-muted">
<li><a href="#">Argentina - Espanol 01</a></li>
<li><a href="#">Argentina - Espanol 02</a></li>
<li><a href="#">Argentina - Espanol 03</a></li>
<li><a href="#">Argentina - Espanol 04</a></li>
<li><a href="#">Argentina - Espanol 05</a></li>
<li><a href="#">Argentina - Espanol 06</a></li>
<li><a href="#">Argentina - Espanol 07</a></li>
<li><a href="#">Argentina - Espanol 08</a></li>
<li><a href="#">Argentina - Espanol 09</a></li>
<li><a href="#">Argentina - Espanol 10</a></li>
<li><a href="#">Argentina - Espanol 11</a></li>
<li><a href="#">Argentina - Espanol 12</a></li>
<li><a href="#">Argentina - Espanol 13</a></li>
<li><a href="#">Argentina - Espanol 14</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-3">
<ul class="list-unstyled text-muted">
<li><a href="#"> Bangladesh - Bengali 01</a></li>
<li><a href="#"> Bangladesh - Bengali 02</a></li>
<li><a href="#"> Bangladesh - Bengali 03</a></li>
<li><a href="#"> Bangladesh - Bengali 04</a></li>
<li><a href="#"> Bangladesh - Bengali 05</a></li>
<li><a href="#"> Bangladesh - Bengali 06</a></li>
<li><a href="#"> Bangladesh - Bengali 07</a></li>
<li><a href="#"> Bangladesh - Bengali 08</a></li>
<li><a href="#"> Bangladesh - Bengali 09</a></li>
<li><a href="#"> Bangladesh - Bengali 10</a></li>
<li><a href="#"> Bangladesh - Bengali 11</a></li>
<li><a href="#"> Bangladesh - Bengali 12</a></li>
<li><a href="#"> Bangladesh - Bengali 13</a></li>
<li><a href="#"> Bangladesh - Bengali 14</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-3">
<ul class="list-unstyled text-muted">
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
<li><a href="#"> Canada - English</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-3">
<ul class="list-unstyled">
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
<li><a href="#" class="text-muted">Danmakr - Dansk</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript-->
<script src="demo/components/jquery/dist/jquery.js"></script>
<script src="demo/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css"></script>
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
<!-- tweet and share :)-->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
OK. We also need the CSS to go with that and, as I’ve asked before, you need to be clearer about the exact help you need. The code you have posted will do nothing without JS, so you really need to post a working demo.
Off Topic
Please take time to read the post I linked to in my first reply, which explains how to post code here, and format it so that it displays correctly in your post.
1 Like
/*!
* Yamm!3 - Yet another megamenu for Bootstrap 3
* http://geedmo.github.com/yamm3
*
* @geedmo - Licensed under the MIT license
*/
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
}
.yamm .yamm-content {
padding: 20px 30px;
}
.yamm-fw{
width: 100%;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
I have asked you several times now to explain what help you need. Are you asking for help with the layout? Are you asking for help with the function? What kind of help do you need?
You seem to be trying to use code from here: http://geedmo.github.io/yamm3/ Is that correct?
We cannot help until you explain what help you require.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.