Difference between revisions of "Template:IISc-Bangalore"

Line 36: Line 36:
 
     float: left;
 
     float: left;
 
     font-size: 20px;
 
     font-size: 20px;
−
}
 
−
#navbar {
 
−
    list-style-type: none;
 
−
    list-style-image: none;
 
−
    margin: 0;
 
−
    padding: 0;
 
−
    overflow: hidden;
 
−
    background-color: #dddddd;
 
−
    position: fixed;
 
−
    width: 100%;
 
−
    top: 16px;
 
−
    left: 0;
 
−
    z-index: 2;
 
−
}
 
−
.navItem {
 
−
    float: right;
 
−
}
 
−
.navItem a {
 
−
    display: block;
 
−
    padding: 8px;
 
 
}
 
}
 
#inPageNav {
 
#inPageNav {
Line 97: Line 77:
 
     margin: 0 0 30px 0;
 
     margin: 0 0 30px 0;
 
     line-height: 2;
 
     line-height: 2;
 +
.navbar {
 +
    overflow: hidden;
 +
    background-color: #333;
 +
    font-family: Arial;
 
}
 
}
−
nav {
+
 
−
     position: fixed;
+
.navbar a {
−
     top: 0;
+
     float: right;
−
     left: 0;
+
     font-size: 16px;
−
     width: 100%;
+
     color: white;
−
     height: 35.2px;
+
     text-align: center;
 +
     padding: 14px 16px;
 +
    text-decoration: none;
 
}
 
}
  
 +
.dropdown {
 +
    float: right;
 +
    overflow: hidden;
 +
}
 +
 +
.dropdown .dropbtn {
 +
    font-size: 16px;   
 +
    border: none;
 +
    outline: none;
 +
    color: white;
 +
    padding: 14px 16px;
 +
    background-color: inherit;
 +
}
 +
 +
.navbar a:hover, .dropdown:hover .dropbtn {
 +
    background-color: red;
 +
}
 +
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 +
.dropdown-content a {
 +
    float: none;
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 +
.dropdown-content a:hover {
 +
    background-color: #ddd;
 +
}
 +
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
#logoImg {
 +
    float: left;
 +
}
 +
 +
}
  
  
Line 113: Line 147:
 
<body>
 
<body>
 
<div id="contentWrapper">
 
<div id="contentWrapper">
−
<ul id="navbar">
+
<div style="position: fixed; width: 100%; top: 0; left: 0;">
−
        <li id="logo">Logo here</li>
+
<div class="navbar">
−
        <li class="navItem"><a href="#news">News</a></li>
+
<a href="#" id="logoImg">Logo here</a>
−
        <li class="navItem"><a href="#home">Home</a></li>
+
<a href="#home">Home</a>
−
        <li class="navItem"><a href="#contact">Contact</a></li>
+
<a href="#news">News</a>
−
        <li class="navItem"><a href="#about">About</a></li>
+
<div class="dropdown">
−
    </ul>
+
<button class="dropbtn">Dropdown
 +
</button>
 +
<div class="dropdown-content">
 +
<a href="#">Link 1</a>
 +
<a href="#">Link 2</a>
 +
<a href="#">Link 3</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 11:47, 7 October 2017