Please help me to detect this problem: sidebar menu appears with every click on the main menu item.
I inherited a Django app and I am trying to learn it. However, since this is a real app and in use I do not have much time to investigate in details. I really appreciate your help. I include only the few templates and I am hoping some one is experienced enough to see the problem by looking at these few templates.
<!DOCTYPE html>
{% load add_utility %}
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Quo - {% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/static/Quo3/css/foundation.css" />
<link rel="stylesheet" href="/static/Quo3/css/style.css" />
<link rel="stylesheet" href="/static/Quo3/css/font-awesome.css" />
<link rel="stylesheet" href="/static/Quo3/css/cropper.css" />
<script src="/static/Quo3/js/vendor/modernizr.js"></script>
<script src="/static/Quo3/js/share.min.js"></script>
<script src="/static/Quo3/js/vendor/jquery.js"></script>
<script src="/static/Quo3/js/ajaxupload.js"></script>
<script src="/static/Quo3/js/cropper.min.js"></script>
<script src="/static/Quo3/js/toastr.min.js"></script>
<link rel="icon" type="image/png" href="/static/Quo3/img/quo_favicon.png" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
ga('create', 'UA-55718101-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!--TOP NAV BAR-->
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<a href="/"><img class="tbar" src="/static/Quo3/img/quo_logo_white.png"/></a>
</li>
<li class="toggle-topbar"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- LEFT NAV SECTION -->
<ul class="left">
<li class="divider"></li>
<li><a href="#menu" class="menu-icon menu-link">MENU   <i class="fa fa-navicon fa-15x"></i></a></li>
<li class="name">
<h1><a href="/"><i class="fa fa-home fa-15x"></i></a></h1>
</li>
<li class="name">
<h1><a onClick="history.go(-1);return true;"><i class="fa fa-angle-left fa-15x"></i></a></h1>
</li>
</ul>
<!-- END LEFT NAV SECTION -->
<!-- RIGHT NAV SECTION -->
<ul class="right">
<li class="has-form">
<a href="/yourfeed/" class="button radius">Followed Topics</a>
</li>
<li class="has-form mright">
<div class="row collapse">
<form action="/search" method="get" id="searchform">
<div class="large-10 small-9 columns searchbar">
<input type="text" placeholder="Search" class="no-border" name="q">
</div>
<div class="large-2 small-3 columns searchbar">
<input type="submit" class="button fa searchbutton" value="">
{% csrf_token %}
</div>
</form>
</div>
</li>
<!-- HELP -->
<!-- L2/PMO%20and%20QA/L3/Quo%20Documents/L4/Quo%20Basic%20Training -->
<li class="right">
<a href="/L2/PMO%20and%20QA/L3/Quo%20Documents/L4/Quo%20Basic%20Training"><i class="fa fa-question-circle fa-15x"></i></a>
</li>
<!-- END HELP -->
</ul>
<!-- END RIGHT NAV SECTION -->
</section>
</nav>
</div>
<!--END TOP NAV-->
<!--OFF CANVAS SIDE NAV-->
<nav id="menu" class="offnav" role="navigation">
{% block quicknav %}{% endblock %}
<ul style="width: 100%; height: 400px; overflow: auto" class="offnav-list">
{% get_visible_departments user as deps %}
{% for dep in deps %}
<li><a href="/L1/{{dep}}"> {{dep}} ></a></li>
{% endfor %}
</ul>
<ul class="off-canvas-list actbut">
{% block addstuff %}{% endblock %}
<div class="navdivider"></div>
<li><a href="logout"><i class="fa logout fa-lg"></i>Logout</a></li>
</ul>
</nav>
<!--END OFF CANVAS SIDE NAV-->
{% block content %}{% endblock %}
<script src="/static/Quo3/js/foundation/foundation.js"></script>
<script src="/static/Quo3/js/foundation/foundation.topbar.js"></script>
<script src="/static/Quo3/js/bigSlide.js"></script>
<script>
$(document).ready(function() {
$('.menu-link').bigSlide();
});
</script>
<script src="/static/Quo3/js/foundation/foundation.equalizer.js"></script>
<script src="/static/Quo3/js/foundation/foundation.reveal.js"></script>
<script src="/static/Quo3/js/foundation/foundation.accordion.js"></script>
<script src="/static/Quo3/js/foundation/foundation.tooltip.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I myself am trying to cache the images to make sure is not the bad performance involved. Other than that I am suspicious to the ajax calls but it is hard for me to touch it without breaking the app!!
Thanks very much for you help.