Creating a jQuery Django Menu Widget Tutorial

Creating a jQuery Django Menu Widget Tutorial

Django Menu Widget - Title
Complete tutorial - 9 Minute Read

Why use a jQuery Django Menu Widget?

The jQuery Django Menu Widget is one that you should definitely add to your arsenal of Javascript. With very simple integration into your django website and functionality that can be useful in so many ways.

Elements that repeat all throughout the site need to be perfect – they’re constantly apart of the user’s experience no matter what page the user happens to be on. The Menu widget is perfect to use with a site’s navigation. 

I would of made the jQuery Django Heroku example site utilize this type of navigation all throughout if it were to be more than just a couple of pages.

The jQuery Django Menu Widget provides a clean menu interface that you should start using in yourDjango projects today. 

jQuery Django Menu Widget - Example

See an Example of a jQuery Django Menu Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

First, we need the source code for the jQuery Django Menu Widget

To get the source code for the menu widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
These two are just the styling jQuery uses by default.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#menu" ).menu();
} );</script>
These are the Javascripts used to actually make the menu widget. The first two are just the scripts used for all the jQuery Widgets, the last one denotes the widget we’re trying to use, which in this case is the menu widget. 
 
jQuery also gives additional styling for the menu widgets:
 
<style>.ui-menu{ width:150px; }</style>
Feel free to change this to whatever your preference is. the default listed is 150 px, but the menu widget will look great at many different sizes. Just your personal preference!
Using the Menu JavaScript to create a Django Menu Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Menu Widget, you will need to create an overarching unordered list that encloses all the other elements and assign this ul the id that we assign to it in the script above. By default this is ‘menu’

<ul id=”menu”>

Then, you need to decide if you want your menu button to also have a submenu coming off from it. If you just want the list item to be a clickable option, with no submenus, then you’ll just enclose it in list item tags and a div container. 

<li><div>Item Name</div></li>

This would produce a menu item of ‘Item Name’ with no additional menu’s stemming from it whenever you hover over it. But what if you want ‘Item Name’ to have two different item types? You could use a submenu like the following:

<li><div>Item Name</div>
<ul>
<li class=”ui-state-disabled”><div>Type A</div></li>
<li><div>Type B</div></li>
<li><div>Type C</div></li>

Notice how we don’t close the list item tag until after we have all the submenu items listed out. We’ve also used something unique on the ‘Type A’ sub menu. jQuery builds in a disabled user interface. So say we have a popular product for sale. So popular that it’s sold out – however, we still want the users to know we sell it. We can disable this from the menu, show that typically it’s still here, but that it’s currently unavailable.

Your menus can be built from nothing more than these simple jQuery integrations – and your site will benefit immensely from these simple menu fixes.  

jQuery Django Widget Live Example Transition - Title Slide
Source code for the jQuery Django Menu Widget on the live site:

Here’s the source code copied straight from the live site and we’ll go through it a bit. 

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}
<script>
$( function() {
$( “#menu” ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
</style>

<ul id=”menu”>
<li><div>SQL</div></li>
<li><div>Javascript</div></li>
<li><div>Python</div>
<ul>
<li class=”ui-state-disabled”><div>Machine Learning</div></li>
<li><div>Django</div></li>
<li><div>Git Integration</div></li>
</ul>
</li>
<li><div>Ruby</div></li>
<li><div>Front End</div>
<ul>
<li><div>CSS</div>
<ul>
<li><div>Div Styling</div></li>
<li><div>Id Styling</div></li>
</ul>
</li>
<li><div>HTML</div>
<ul>
<li><div>Elegant</div></li>
<li><div>Brute Force</div></li>
</ul>
</li>
<li><div>jQuery</div></li>
</ul>
</li>
<li class=”ui-state-disabled”><div>C+</div></li>
</ul>

{% endblock %}

Quick Review of the jQuery Django Menu Widget:

  • Being able to use submenus in your menu can be super userful for creating navigation menus at the top of your site.
  • To create a navigation menu, you would use the same ideas as in this tutorial, but use anchor tags inside each of the list items. 
  • The disable feature is useful for production environments! If you’re not ready to launch a portion of your site, you can just disable this menu item while still including it. 

That’s pretty much it whenever it comes to creating your own jQuery Django Menu Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

Enjoy this content? Subscribe to the newsletter! 

Other jQuery Django Widget Tutorials:

Leave a Reply

Your email address will not be published. Required fields are marked *