Merge pull request #12 from Ishwerdas/master

Compatibility with navigation
BRL-CAD · Feb 27, 2016 · 46c6e7b · 46c6e7b
2 parents b1f33c0 + 34be93e
commit 46c6e7b
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -150,35 +150,35 @@
   </head>
   <body>
 
-    <div class="header" id="header">
-      <table class="menutable">
-        <tr>
-          <td valign="top" class="menu">
-            <div ><a href="http://brlcad.org/d/download/" class="menu">download</a></div>
-          </td>
-          <td valign="top" class="menu">
-            <div ><a href="https://www.facebook.com/BRL-CAD-387112738872/" class="menu">news</a></div>
-          </td>
-          <td valign="top" class="menu">
-            <div ><a href="http://brlcad.org/d/about" class="menu">about</a></div>
-          </td>
-          <td valign="top" class="logomenu">
-            <img onclick="menu_home()" src="img/logo_color.png" alt="Home" class="logo">
-          </td>
-          <td valign="top" class="menu">
-            <div ><a href="http://brlcad.org/wiki/" class="menu">docs</a></div>
-          </td>
-          <td valign="top" class="menu">
-            <div onclick="menu_support()onclick="menu_docs()""><a href="https://sourceforge.net/projects/brlcad/support" class="menu">support</a></div>
-          </td>
-          <td valign="top" class="menu">
-            <div ><a href="http://brlcad.org/gallery/" class="menu">gallery</a></div>
-            <!-- onclick="menu_gallery()" -->
-          </td>
-        </tr>
-      </table>
-    </div>
-
+	<div class="id_logo" id='logo'>
+            <span class="circle" href="#"> 
+                <img src="img/logo_color.png" width="65px" height="65px"/>
+            </span> 
+        </div>
+
+        <!-- header code starts here -->
+		<header class="head">
+			 <nav class="navbar"> 
+				<ul class="navigation id_main-nav" id="main-nav">				
+					<li><a href="http://brlcad.org/gallery">
+                        Gallery</a></li>
+                    <li><a href="https://sourceforge.net/projects/brlcad/support">
+                        Support</a></li>
+                    <li><a href="https://www.facebook.com/BRL-CAD-387112738872/">
+                        News</a></li> 
+                    <li><a href="http://brlcad.org/wiki/">
+                        Documentation</a></li>
+                    <li><a href="http://brlcad.org/d/download"> 
+                        Download</a></li>
+                    <li>
+                        <a href="http://brlcad.org/d/about">
+                            About
+                        </a>
+                    </li>
+                    
+				</ul>
+			</nav>
+		</header>
     <div class="about" id="about">
 
       <div class="tessellactation-container">

diff --git a/style.css b/style.css
@@ -851,4 +851,120 @@ a.menu{
                 .footer{
                     padding: 20px 20px 20px 20px;
                 }
-            }
+            }
+
+/**************
+New Navigtaion
+***************/
+
+.id_logo {
+  height: 75px;
+  text-align: center;
+  position: fixed;
+  top: 0;
+  left: 20px;
+  z-index: 1100;
+}
+
+.circle {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  background: transparent;
+  display: inline-block;
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -o-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 1s;
+  -moz-transition-duration: 1s;
+  -o-transition-duration: 1s;
+  transition-duration: 1s;
+  -webkit-transition-timing-function: ease-in;
+  -moz-transition-timing-function: ease-in;
+  -o-transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
+}
+.circle img {
+  margin-top: -5px;
+}
+
+.head {
+  min-height: 50px;
+  background: #222222;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  -webkit-box-shadow: 0px 2px 3px #222222;
+  -moz-box-shadow: 0px 2px 3px #222222;
+  box-shadow: 0px 2px 3px #222222;
+}
+.head a {
+  color: #ececec;
+}
+.navbar {
+  width: 90%;
+  max-width: 1000px;
+  margin: auto;
+}
+.navbar .navigation li {
+  float: right;
+  text-align:center;
+  width: 16%;
+  line-height: 50px;
+  font-size: 16px;
+  border-bottom: 2px solid #222222;
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -o-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: ease-in;
+  -moz-transition-timing-function: ease-in;
+  -o-transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
+}
+.navbar .navigation li:hover {
+  border-bottom: 2px solid #ee3b5b;
+}
+
+.navbar .navigation li a {
+  display: block;
+}
+
+@media only screen and (max-width: 1100px) {
+  .navbar .navigation li {
+    font-size: 14px;
+    width: 136px;
+  }
+}
+@media only screen and (max-width: 920px) {
+  .navbar .navigation li {
+    font-size: 14px;
+    width: 33%;
+  }
+
+  .navbar .navigation {
+    float: right;
+    width: 80%;
+  }
+
+  .id_logo {
+    top: 25px;
+    left: 10px;
+  }
+}
+@media only screen and (max-width: 600px) {
+  .navbar .navigation li {
+    display: none;
+  }
+
+  .head {
+    position: relative;
+  }
+}
+