Skip to content
Snippets Groups Projects
Commit 4426e5769672 authored by Matti Picus's avatar Matti Picus
Browse files

rework navbar

parent 2a10a45f9acf
No related branches found
No related tags found
No related merge requests found
......@@ -167,6 +167,8 @@
# Alternative navigation links. Works the same way NAVIGATION_LINKS does,
# although themes may not always support them. (translatable)
# (Bootstrap 4: right-side of navbar, Bootblog 4: right side of title)
#
# Not supported in the PyPy theme
NAVIGATION_ALT_LINKS = {
DEFAULT_LANG: ()
}
......
:root {
--content-width: 1000px;
--breakpoint: 799px;
--nav-height: 70px;
--nav-background: #d0dad5;
--nav-font-color: darkolivgreen;
--link-hover-color: #e0dad5;
}
body {
color: #383939;
}
......@@ -11,201 +20,6 @@
background-color: #d0dad5;
}
.myTopNav {
/* background-color: #333; */
display: flex;
flex-direction: row;
margin-bottom: 5px;
height: 47px;
}
/* Style the links inside the navigation bar */
.myTopNav a {
float: left;
display: block;
text-decoration: none;
font-size: 17px;
}
.topnav {
height: 32px;
}
.topnav a {
float: left;
display: block;
color: #383939;
text-align: center;
padding-top: 8px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 12px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.myTopNav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: #383939;
padding-top: 10px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 12px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.myTopNav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.myTopNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.myTopNav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.myTopNav.responsive {position: relative;}
.myTopNav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.myTopNav.responsive a {
float: none;
display: block;
text-align: left;
}
.myTopNav.responsive .dropdown {float: none;}
.myTopNav.responsive .dropdown-content {position: relative;}
.myTopNav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
} .row {
display: flex;
flex-direction: column;
padding: 0;
width: 100%; }
.row .column {
display: block;
flex: 1 1 auto;
margin-left: 0;
max-width: 100%;
width: 100%; }
@media (min-width: 40rem) {
.row {
flex-direction: row;
margin-left: -1.0rem;
width: calc(100% + 2.0rem); }
.row .column {
margin-bottom: inherit;
padding: 0 1.0rem; } }
@media screen and (max-width: 40rem) {
.row .column {
text-align: center; } }
.pb-4 {
padding-bottom: 6rem; }
.text-sm {
font-size: 1rem; }
.text-lg {
font-size: 2rem; }
/*.button, button {
background-color: transparent;
border: 0.1rem solid #1890ff;
border-radius: .4rem;
cursor: pointer;
display: inline-block;
font-weight: 700;
height: 2rem;
letter-spacing: .1rem;
line-height: 2rem;
padding: 0 2.0rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.button:focus, .button:hover,
button:focus,
button:hover
{
background-color: lightblue;
border-color: #4B545C;
color: white;
}
*/
pre.literal-block {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
......@@ -229,3 +43,167 @@
.logotext {
padding-top: 4px;
}
#toplogo {
padding-top: 18px;
}
/* For the responsive navbar, adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar */
@charset "UTF-8";
.navigation {
height: 70px;
background: var(--nav-background);
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: var(--nav-font-color);
text-decoration: none;
}
.nav-container {
max-width: content-width;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a:link,
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: var(--nav-background);
color: var(--nav-font-color);
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:link:hover,
nav ul li a:visited:hover {
background: var(--link-hover-color);
color: var(--nav-font-color);
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: var(--nav-background);
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: black;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
'use strict';
// Navbar
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function make_responsive() {
var x = document.getElementById("myTopNav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(eee) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
eee.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
......@@ -29,22 +29,26 @@
{% endmacro %}
{% macro html_navigation_links() %}
<div class="myTopNav">
<div>
<a href="index.html" height=40px;>
<image src="images/pypy-logo.svg" width=75px; alt=PyPy/>
</a>
</div>
<div class="topnav">
{{ html_navigation_links_entries(navigation_links) }}
{{ html_navigation_links_entries(navigation_alt_links) }}
{{ template_hooks['menu']() }}
{{ template_hooks['menu_alt']() }}
</div>
<a href="javascript:void(0);" class="icon" onclick="make_responsive()">&#9776;</a>
</div>
<!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width=75px; alt=PyPy/>
</a>
</div>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"> <span></span></a>
</div>
<ul class="nav-list">
{{ html_navigation_links_entries(navigation_links) }}
</ul>
</nav>
</div>
</section>
{% endmacro %}
{% macro html_navigation_links_entries(navigation_links_source) %}
{% for url, text in navigation_links_source[lang] %}
{% if isinstance(url, tuple) %}
......@@ -46,18 +50,14 @@
{% endmacro %}
{% macro html_navigation_links_entries(navigation_links_source) %}
{% for url, text in navigation_links_source[lang] %}
{% if isinstance(url, tuple) %}
<div class="dropdown"> <button class="dropbtn">{{ text }}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
{% for suburl, text in url %}
{% if rel_link(permalink, suburl) == "#" %}
<a class="active" href="{{ permalink }}">{{ text }}{{ messages("(active)", lang) }}</a>
{% else %}
<a href="{{ suburl }}">{{ text }}</a>
{% endif %}
{% endfor %}
</div></div>
<li>
<a href="#!">{{ text}}</a>
<ul class="nav-dropdown">
{% for url2, text2 in url %}
<li> <a href="{{ url2 }}">{{ text2}}</a> </li>
{% endfor %}
</ul>
</li>
{% else %}
......@@ -63,9 +63,5 @@
{% else %}
{% if rel_link(permalink, url) == "#" %}
<a class="active" href="{{ permalink }}">{{ text }}<span class="sr-only"> {{ messages("(active)", lang) }}</span></a>
{% else %}
<a href="{{ url }}">{{ text }}</a>
{% endif %}
<li> <a href="{{ url }}">{{ text}}</a> </li>
{% endif %}
{% endfor %}
{% endmacro %}
......
......@@ -71,6 +71,7 @@
<script src="/assets/js/all-nocdn.js"></script>
{% endif %}
{% else %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" crossorigin="anonymous"></script>
<script src="/assets/js/styles.js"></script>
{% endif %}
{% if date_fanciness != 0 %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment