top of page
Search
Sep 23, 2020

Mega Menu Using Django And Bootstrap



In this we will add mega menu in nav bar of home page of our web application using Django and bootstrap.


Below the working steps which need to do


First install pycharm editor which is better and no need to create virtual environment.


Step 1:

First install Django:

Open pycharm terminal and run below command


(venv) D:\Django projects>pip install Django


Step 2:

After installing django creating the project using below command

(venv) D:\Django projects> django-admin startproject createmegamenu

Chang directory and go to project directory using "cd createmegamenu"


(venv) D:\Django projects> cd createmegamenu

Now you move on current project directory:

(venv) D:\Django projects\createmegamenu>

Step 3:

Run project on to the local server

(venv) D:\Django projects\createmegamenu>python manage.py runserver

Output:

Watching for file changes with StatReloader

Performing system checks...


System check identified no issues (0 silenced).


You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.

Run 'python manage.py migrate' to apply them.

September 22, 2020 - 14:32:20

Django version 3.1.1, using settings 'SocialPost.settings'

Starting development server at http://127.0.0.1:8000/

Quit the server with CTRL-BREAK.


When you click on generated 127.0.0.1:8000, you switch to the browser and see rocket symbol that means your project run successfully.


Step 4:

Creating app : navbar

After creating the project we need to create an app, app may be one or more in single project.

(venv) D:\Django projects\createmegamenu>python manage.py startapp navbar

Go to the settings.py in project and add the project name:


createmegamenu/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'navbar',
]

Now you go to add code in app : navbar

navbar/urls.py


from django.urls import path

from . import views

urlpatterns = [
    path('', views.home, name='home'),
    
]

navbar/views.py

from django.shortcuts import render

def home(request):
    return render(request, 'index.html', context=None)

Now next we include the app urls.py in project (urls.py) file:


createmegamenu/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('post.urls')),
]

After this creating templates in app(navbar) directory which has all html(index.html) files:


Add this bootstrap code in this index.html file to create the mega menu:


navbar/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    {% load static %}
    <script src="{% static 'script.js' %}" type="text/javascript"></script>

    {% load static %}
    <link href="{% static 'style.css' %}" rel="stylesheet">

</head>
<body>

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img alt="Logo" src="https://www.solodev.com/assets/side-nav/logo.png"></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Products <b class="caret"></b> </a>
          <ul class="dropdown-menu megamenu">
            <li class="row">
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
          <ul class="dropdown-menu megamenu row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Software</li>
                <li><a href="#">Desktop</a></li>
                <li class="disabled"><a href="#">Mobile</a></li>
                <li><a href="#">Tablet</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Hardware</li>
                <li><a href="#">Arduino</a></li>
                <li><a href="#">Raspberry PI</a></li>
                <li><a href="#">VoCore</a></li>
                <li><a href="#">Banana PI</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Nano-Tech</li>
                <li><a href="#">AFM</a></li>
                <li><a href="#">STM</a></li>
                <li><a href="#">Nano-Tubes</a></li>
                <li><a href="#">Nano-Wires</a></li>
                <li><a href="#">Materials</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">A.I.</li>
                <li><a href="#">Artificial Intelligence</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">SaaS</li>
                <li><a href="#">On-Demand</a></li>
                <li><a href="#">No Software</a></li>
                <li><a href="#">Cloud Computing</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">On-Premise</li>
                <li><a href="#">Data Center</a></li>
                <li><a href="#">Hosting Environment</a></li>
                <li><a href="#">Internal IT</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Server-Side</li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">Ruby</a></li>
                <li><a href="#">ColdFusion</a></li>
                <li><a href="#">ASP.NET</a></li>
                <li><a href="#">GO</a></li>
                <li><a href="#">Perl</a></li>
                <li><a href="#">Lasso</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
          <ul class="dropdown-menu megamenu row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Web Design</li>
                <li><a href="#">HTML5</a></li>
                <li class="disabled"><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Web Development</li>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Mobile Apps</a></li>
                <li><a href="#">Responsive</a></li>
                <li><a href="#">Web Apps</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Graphic Design</li>
                <li><a href="#">PSD</a></li>
                <li><a href="#">Images</a></li>
                <li><a href="#">Logos</a></li>
                <li><a href="#"></a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Database Design</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">UI/UX Design</li>
                <li><a href="#">User Interface</a></li>
                <li><a href="#">User Experience</a></li>
                <li><a href="#">Web Designers</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Digital Marketing</li>
                <li><a href="#">Paid</a></li>
                <li><a href="#">Social</a></li>
                <li><a href="#">Content Marketing</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Project Management</li>
                <li><a href="#">Initiating</a></li>
                <li><a href="#">Planning</a></li>
                <li><a href="#">Executing</a></li>
                <li><a href="#">Monitoring</a></li>
                <li><a href="#">Controlling</a></li>
                <li><a href="#">Closing</a></li>
                <li><a href="#">PM Systems</a></li>
                <li><a href="#">Best Practices</a></li>
                <li><a href="#">Project Manager</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<!--{% load static %}
<img src="{% static "map.png" %}" alt="My image">-->

</body>
</html>

Adding Static files for design menubar:


first check project(settings.py) has below one line of code in bottom, if not then add below code at the bottom of settings.py in project(createmegamenu)


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

After this creating another directory static in app(navbar) directory, which contains all the static files like css, javascript, image, etc.


navbar/static/style.css


.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-left: 60px;
}
.navbar-brand {
    height: auto;
    margin: 0;
    padding: 0;
    margin-right: 20px;
}
.navbar-default{
color: #fff;
background-color: #2F4F4F;
border-color: #000000;
}
.navbar-default .navbar-nav > li > a{
   color:#fff;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
   border-top-color: #fff;
    border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
   color:#fff;
}
.menu-large {
  position: static !important;
}
.megamenu{
  padding: 20px 0px;
  width:100%;
}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #00A7E8;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}
@media (max-width: 768px) {
  .megamenu{
    margin-left: 0 ;
    margin-right: 0 ;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header{
   color:#fff;
  }
}


navbar/static/script.js

$(document).ready(function() {
  jQuery(document).ready(function(){
    $(".dropdown").hover(
      function() { $('.dropdown-menu', this).stop().fadeIn("fast");
        },
      function() { $('.dropdown-menu', this).stop().fadeOut("fast");
    });
  });
}

Now need to run it using below command:


Run project on to the local server

(venv) D:\Django projects\createmegamenu>python manage.py runserver

And Get output like that:




Contact us to get any Django assignment help:

contact@codersarts.com

Comments

bottom of page