base.html: Improve Navbar

Improve Navbar and add navstyle.css for styling Closes pclubuiet#2 base.html: Improve Navbar
sagar-kalra · Oct 18, 2017 · 4c6fa65 · 4c6fa65
1 parent 0869972
commit 4c6fa65
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 14 deletions.
diff --git a/staticFiles/home/base.css b/staticFiles/home/base.css
@@ -1,9 +1,16 @@
 .footer {
-  position: absolute;
+  position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #222;
+  height: 120px;
+}
+
+#content {
+	padding-top: 45px;
+	margin-bottom: 110px;
+	clear: both;
 }
 
 .loader-wrapper {

diff --git a/staticFiles/home/navstyle.css b/staticFiles/home/navstyle.css
@@ -0,0 +1,109 @@
+@import url(http://fonts.googleapis.com/css?family=Raleway);
+#cssmenu,
+#cssmenu ul,
+#cssmenu ul li,
+#cssmenu ul li a {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+  line-height: 1;
+  display: block;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#cssmenu a {
+  font-size: 35px;
+  text-decoration: none;
+  float:left;
+  vertical-align: center;
+}
+#cssmenu:after,
+#cssmenu > ul:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+#cssmenu {
+  width: 100%;
+  position: absolute;
+  border-bottom: 3px solid #23527C;
+  font-family: Raleway, sans-serif;
+  line-height: 1;
+  right: 0;
+  left: 0;
+}
+#cssmenu ul {
+  float: right;
+}
+#cssmenu{
+  background: #222;
+}
+#cssmenu > ul > li {
+  float: left;
+}
+#cssmenu.align-center > ul {
+  font-size: 0;
+  text-align: center;
+}
+#cssmenu.align-center > ul > li {
+  display: inline-block;
+  float: none;
+}
+#cssmenu.align-right > ul > li {
+  float: right;
+}
+#cssmenu.align-right > ul > li > a {
+  margin-right: 0;
+  margin-left: -4px;
+}
+#cssmenu > ul > li > a {
+  z-index: 2;
+  padding: 18px 25px 12px 25px;
+  font-size: 15px;
+  font-weight: 400;
+  text-decoration: none;
+  color: #EEE;
+  -webkit-transition: all .2s ease;
+  -moz-transition: all .2s ease;
+  -ms-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  transition: all .2s ease;
+  margin-right: -4px;
+}
+#cssmenu > ul > li.active > a,
+#cssmenu > ul > li:hover > a,
+#cssmenu > ul > li > a:hover {
+  color: #ffffff;
+}
+#cssmenu > ul > li > a:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: -1;
+  width: 100%;
+  height: 120%;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  content: "";
+  -webkit-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  transition: all .2s ease;
+  -webkit-transform: perspective(5px) rotateX(2deg);
+  -webkit-transform-origin: bottom;
+  -moz-transform: perspective(5px) rotateX(2deg);
+  -moz-transform-origin: bottom;
+  transform: perspective(5px) rotateX(2deg);
+  transform-origin: bottom;
+}
+#cssmenu > ul > li.active > a:after,
+#cssmenu > ul > li:hover > a:after,
+#cssmenu > ul > li > a:hover:after {
+  background: #23527C;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -9,6 +9,7 @@
     <title>{% block title %}Programming Club{% endblock %}</title>
     <!-- Bootstrap -->
     <link rel="stylesheet" type="text/css" href="{% static 'home/base.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'home/navstyle.css' %}"/>
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
@@ -17,9 +18,12 @@
     <link rel = 'stylesheet' href="{% static 'home/base.css' %}">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
+    <link rel="stylesheet" href="navstyle.css">
     {% block styles %}
     {% endblock %}
 </head>
+<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
+   <script src="script.js"></script>
     <!-- Latest compiled and minified JavaScript -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
@@ -43,24 +47,16 @@
   	<div class="loader-rect5"></div>
   </div>
 </div>
-<nav class="navbar navbar-inverse" style="margin-bottom:0;">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span> 
-      </button>
-      <a class="navbar-brand" href="{% url 'home:home' %}">Programming Club</a>
-    </div>
-    <div class="collapse navbar-collapse" id="myNavbar">
-    <ul class="nav navbar-nav">
+    <div class="bs-navbar-collapse" id="myNavbar">
+    <div id='cssmenu'>
+    <a href="{% url 'home:home' %}" >Programming Club</a>
+    <ul>
       <li {% block nav_home %}class="active"{% endblock %}><a href="{% url 'home:home' %}">Home</a></li>
       <li {% block nav_resources %}{% endblock %}><a href="{% url 'home:resources' %}">Resources</a></li>
+      <li><a href="#">About Us</a></li>
     </ul>
     </div>
   </div>
-</nav>
 <div id = "content">
 {% block content %}{% endblock %}
 </div>