Ibo Ibo - 3 years ago 141
CSS Question

django dropdown item hyperlink not working when clicking

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'),
]

Answer Source

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);
        })
    });
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download