Fix navs and menus

This commit is contained in:
hiromipaw 2018-02-16 18:40:25 +01:00
parent d2b758b764
commit 6d46d59281
6 changed files with 102 additions and 85 deletions

View File

@ -476,14 +476,36 @@ pre {
display: block;
}
.hamburger .navbar-toggler {
margin-left: 93%;
margin-top: -10%;
label {
cursor: pointer;
}
.hamburger:hover .hamburger-menu {
display: block;
#menu-toggle {
display: none; /* hide the checkbox */
}
#nav-toggle {
display: none; /* hide the checkbox */
}
.side-toggler {
float:right !important;
}
#menu-toggle:checked + .burger-menu {
display: block;
}
#nav-toggle:checked + .hamburger-menu {
display: block;
}
.navbar-toggler:hover .chevron-up {
display: block !important;
}
.navbar-toggler:hover .chevron-down {
display: none;
}
a.side-nav.active {
@ -497,6 +519,7 @@ a.side-nav.active {
.chevron {
height: 50px;
width: 50px;
margin: -10px;
}
.chevron-up {
@ -521,20 +544,4 @@ a.side-nav.active {
.burger button {
float: right !important;
margin-top: -50px;
}
.burger:hover .burger-menu {
display: block;
}
.burger:hover .chevron-up {
display: block !important;
}
.burger:hover .chevron-down{
display: none;
}
}

View File

@ -6872,13 +6872,32 @@ pre {
.dropdown:hover .dropdown-menu {
display: block; }
.hamburger .navbar-toggler {
margin-left: 93%;
margin-top: -10%; }
label {
cursor: pointer; }
.hamburger:hover .hamburger-menu {
#menu-toggle {
display: none;
/* hide the checkbox */ }
#nav-toggle {
display: none;
/* hide the checkbox */ }
.side-toggler {
float: right !important; }
#menu-toggle:checked + .burger-menu {
display: block; }
#nav-toggle:checked + .hamburger-menu {
display: block; }
.navbar-toggler:hover .chevron-up {
display: block !important; }
.navbar-toggler:hover .chevron-down {
display: none; }
a.side-nav.active {
color: #7D4698 !important; }
@ -6887,7 +6906,8 @@ a.side-nav.active {
.chevron {
height: 50px;
width: 50px; }
width: 50px;
margin: -10px; }
.chevron-up {
display: none !important; }
@ -6902,20 +6922,7 @@ a.side-nav.active {
nav.smalltopics {
display: block;
width: 100%; }
.burger button {
float: right !important;
margin-top: -50px; }
.burger:hover .burger-menu {
display: block; }
.burger:hover .chevron-up {
display: block !important; }
.burger:hover .chevron-down {
display: none; } }
width: 100%; } }
/* Support Portal Styles
*
*/

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,6 @@
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ '/static/bootstrap.css'|asseturl }}">
<link rel="stylesheet" href="{{ '/static/fonts/open-iconic/font/css/open-iconic-bootstrap.css'|asseturl }}">

View File

@ -3,39 +3,40 @@
<img src="{{ '/static/images/tor-logo.svg' }}" >
<span class="sr-only">Tor Logo</span>
</a>
<div class="container-fluid d-block hamburger">
<button class="btn navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<label for="nav-toggle">
<a class="btn btn-lg btn-primary navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse hamburger-menu" id="navbarSupportedContent">
<div class="justify-content-md-center mx-auto pt-2">
<ul class="navbar-nav offset-md-2">
{% set menubag = 'menu+' + this.alt %}
{% for id, item in bag(menubag).items() %}
<li{% if this.is_child_of(item.path) %} class="nav-item active" {% else %} class="nav-item"{% endif %}>
<a class="nav-link" href="{{ item.path }}">{{ item.label }}
{% if this.is_child_of(item.path) %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="mt-2 btn-group dropdown pr-2">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
English
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Spanish</a>
<a class="dropdown-item" href="#">French</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/download-easy.html.en"><i class="glyphicon-glyphicon-arrow-down"></i>Download Tor Browser</a>
</a>
</label>
<input type="checkbox" id="nav-toggle"/>
<div class="collapse navbar-collapse hamburger-menu" id="navbarSupportedContent">
<div class="justify-content-md-center mx-auto pt-2">
<ul class="navbar-nav">
{% set menubag = 'menu+' + this.alt %}
{% for id, item in bag(menubag).items() %}
<li{% if this.is_child_of(item.path) %} class="nav-item active" {% else %} class="nav-item"{% endif %}>
<a class="nav-link" href="{{ item.path }}">{{ item.label }}
{% if this.is_child_of(item.path) %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="mt-2 btn-group dropdown pr-2">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
English
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Spanish</a>
<a class="dropdown-item" href="#">French</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/download-easy.html.en"><i class="glyphicon-glyphicon-arrow-down"></i>Download Tor Browser</a>
</div>
</nav>

View File

@ -3,22 +3,23 @@
<a class="text-primary bg-white font-weight-bold navbar-brand" href="#collapseTopicsNav">
Topics
</a>
<div class="burger">
<button class="navbar-toggler chevron" type="button" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
<label class="side-toggler" for="menu-toggle">
<a class="btn btn-lg outline-primary text-primary navbar-toggler chevron" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-chevron-top chevron-up"></span>
<span class="oi oi-chevron-bottom chevron-down"></span>
</button>
</a>
</label>
<input type="checkbox" id="menu-toggle"/>
<div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent">
<ul class="nav nav-pills flex-column">
{% set topicbag = 'topics+' + this.alt %}
{% for id, item in bag(topicbag).items() %}
<li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
<a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %} href="{{ item.path }}">{{ item.label }}</a>
</li>
<div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent">
<ul class="nav nav-pills flex-column">
{% set topicbag = 'topics+' + this.alt %}
{% for id, item in bag(topicbag).items() %}
<li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
<a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %} href="{{ item.path }}">{{ item.label }}</a>
</li>
{% endfor %}
</div>
{% endfor %}
</div>
<hr />
</nav>