django dropdown item hyperlink not working when clicking

Question

I am building a Django app and everything is working except the link in a dropdown menu. I have followed everything that was necessary, but somehow the link does not make Django to render the page. Under

More

the link

About

should work, but it does not. I include the code and also I have deployed it temporarily for a production inspection:

http://azeribocorp.pythonanywhere.com/index

html:

{% load static %}

{% load staticfiles %}





{% block stylesheets %} 

    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">

{% endblock %}





<!--Top Navigation-->

<nav role="navigation" class="nav" id="topnav">

    <ul class="nav-items">

        <li class="{% if request.resolver_match.url_name == 'index' %}

                nav-item active

            {% else %}

                nav-item

            {% endif %}"> 

            <a href={% url 'index' %} class='nav-link'><span>Home</span></a>

        </li>

        <!--<li class="nav-item">

            <a href={% url 'index' %} class="nav-link" ><span>Home</span></a>

        </li>-->

        <li class="{% if request.resolver_match.url_name == 'track_containers' %}

                nav-item active

            {% else %}

                nav-item

            {% endif %}"> 

            <a href={% url 'track_containers' %} class='nav-link'><span>Track Containers</span></a>

        </li>

            <nav class="submenu">

                <ul class="submenu-items">

                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>

                </ul>

            </nav>

        </li> 

        <li class="{% if request.resolver_match.url_name == 'search' %}

                nav-item active

            {% else %}

                nav-item

            {% endif %}"> 

            <a href={% url 'search' %} class='nav-link'><span>Search</span></a>

        </li>

        <li class="{% if request.resolver_match.url_name == 'report' %}

                nav-item active

            {% else %}

                nav-item

            {% endif %}"> 

            <a href={% url 'report' %} class='nav-link'><span>Report</span></a>

        </li>

        <li class="nav-item dropdown">

            <a href="#" class="nav-link"><span>More</span></a>

            <nav class="submenu">

                <ul class="submenu-items">

                    <li class="submenu-item"><a href={% url 'about' %} class="submenu-link">About</a></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>

                    <li class="submenu-item"><hr class="submenu-seperator" /></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>

                </ul>

            </nav>

        </li> 

        <!--

        <li class="{% if request.resolver_match.url_name == 'more' %}

                nav-item dropdown active

            {% else %}

                nav-item dropdown

            {% endif %}"> 

            <a href='#'><span>More</span></a>

            <nav class="submenu">

                <ul class="submenu-items">

                    <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>

                    <li class="submenu-item"><hr class="submenu-seperator" /></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>

                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>

                </ul>

            </nav>

        </li> -->

    </ul>

</nav>



{% block js %}

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

{% endblock js %}

css:

body {

  margin: auto;

}



.topnavbar {

  background-color: rgba(20, 180, 255, 1);

  /*rgba(0,255,150,0.6); #3EDC99*/

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);

}



.nav {

  padding: 5px 5px 5px 5px;

}



html {

  box-sizing: border-box;

}



*,

*:before,

*:after {

  box-sizing: inherit;

}



body {

  background-color: rgba(245, 245, 245, 1)/*#3498db; */

}



.nav {

  width: 550px;

  margin: 0 auto 0 auto;

  text-align: center;

}





/* Navigation */



.nav {

  font-family: Verdana, Georgia, Arial, sans-serif;

  font-size: 14px;

}



.nav-items {

  padding: 0;

  list-style: none;

}





/* color of menu links

    span    {



        color:yellow;

    }

    */



.nav-item {

  display: inline-block;

  margin-right: 25px;

}



.nav-item:last-child {

  margin-right: 0;

}



.nav-link,

.nav-link:link,

.nav-link:visited,

.nav-link:active,

.submenu-link,

.submenu-link:link,

.submenu-link:visited,

.submenu-link:active {

  display: block;

  position: relative;

  font-size: 14px;

  letter-spacing: 1px;

  cursor: pointer;

  text-decoration: none;

  outline: none;

  color: #ffffff;

}



.nav-link::before {

  content: "";

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  height: 3px;

  background: rgba(0, 0, 0, 0.2);

  opacity: 0;

  -webkit-transform: translate(0, 10px);

  transform: translate(0, 10px);

  transition: opacity 0.3s ease, transform 0.3s ease;

}



.nav-link:hover::before {

  opacity: 1;

  -webkit-transform: translate(0, 5px);

  transform: translate(0, 5px);

}



.dropdown {

  position: relative;

}



.dropdown .nav-link {

  padding-right: 15px;

  height: 17px;

  line-height: 17px;

}



.dropdown .nav-link::after {

  content: "";

  position: absolute;

  top: 6px;

  right: 0;

  border: 5px solid transparent;

  border-top-color: #ffffff;

  /*small triangle showing drop down menu*/

}



.submenu {

  position: absolute;

  top: 100%;

  left: 50%;

  z-index: 100;

  width: 200px;

  margin-left: -100px;

  background: #ffffff;

  border-radius: 3px;

  line-height: 1.46667;

  margin-top: -5px;

  box-shadow: 0 0 8px rgba(0, 0, 0, .3);

  opacity: 0;

  -webkit-transform: translate(0, 0) scale(.85);

  transform: translate(0, 0)scale(.85);

  transition: transform 0.1s ease-out, opacity 0.1s ease-out;

  pointer-events: none;

}



.submenu::after,

.submenu::before {

  content: "";

  position: absolute;

  bottom: 100%;

  left: 50%;

  margin-left: -10px;

  border: 10px solid transparent;

  height: 0;

}



.submenu::after {

  border-bottom-color: #ffffff;

}



.submenu::before {

  margin-left: -13px;

  border: 13px solid transparent;

  border-bottom-color: rgba(0, 0, 0, .1);

  -webkit-filter: blur(1px);

  filter: blur(1px);

}



.submenu-items {

  list-style: none;

  padding: 10px 0;

}



.submenu-item {

  display: block;

  text-align: left;

}



.submenu-link,

.submenu-link:link,

.submenu-link:visited,

.submenu-link:active {

  color: #3498db;

  padding: 10px 20px;

}



.submenu-link:hover {

  text-decoration: underline;

}



.submenu-seperator {

  height: 0;

  margin: 12px 10px;

  border-top: 1px solid #eee;

}



.show-submenu .submenu {

  opacity: 1;

  -webkit-transform: translate(0, 25px) scale(1);

  transform: translate(0, 25px) scale(1);

  pointer-events: auto;

}



.submenu-link {

  color: red;

}



.nav-link.is-active::before {

  opacity: 1;

  -webkit-transform: translate(0, 5px);

  transform: translate(0, 5px);

}



.active{

    color:red;

    text-decoration:underline;

}

js:

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){

    el.addEventListener('click', onClick, false);

});



function onClick(e){

    e.preventDefault();

    var el = this.parentNode;

    el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);

}



function showSubMenu(el){

    el.classList.add('show-submenu');

    document.addEventListener('click', function onDocClick(e){

        e.preventDefault();

        if(el.contains(e.target)){

            return;

        }

        document.removeEventListener('click', onDocClick);

        hideSubMenu(el);

    });

}



function hideSubMenu(el){

    el.classList.remove('show-submenu');

}

views.py:

def index(request):

    return render(request, 'aztracker/__base.html')



def home(request):

    return render(request, 'aztracker/__base.html')



def report(request):

    return render(request, 'aztracker/__base.html')



def about(request):

    return render(request, 'aztracker/search_form.html')

urls.py:

from django.conf.urls import include, url

from .views import *



urlpatterns = [    

    url(r'^index', index, name='index'),

    url(r'^home', home, name='home'),

    url(r'^search', search, name='search'),

    url(r'^report', report, name='report'),

    url(r'^about', about, name='about'),

    url(r'^countries', list_all_countries, name='countries'),

    url(r'^track_containers', import_data, name='track_containers'),

]

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

In js file there has document click event. So when you click on submenu then the click event bubble to document and onDocClick function executed. To stop click event bubbling you have to add a new click event on submenu links with event.stopPropagation().

Change your js code by this,

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
    el.addEventListener('click', onClick, false);

    /** New event for submenu links **/
    el.parentNode.querySelectorAll('.submenu-link').forEach(function(sel){
        sel.addEventListener('click', function(event){
            event.stopPropagation();
            hideSubMenu(el.parentNode);
        })
    });
});

django dropdown item hyperlink not working when clicking

Sign up