Adds Dropdown Global Nav

This commit is contained in:
Andy Tudhope 2018-09-28 22:05:07 +02:00
parent 6b09719c31
commit f210c90311
No known key found for this signature in database
GPG Key ID: 02A3DFA93BF26AD2
3 changed files with 102 additions and 20 deletions

View File

@ -6,12 +6,48 @@
<span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
</div>
<ul class="main-nav">
<li><a href="/docs/nimbus.html">Docs</a></li>
<li><a href="/docs/contributor_guide.html">Contribute</a></li>
<li><a href="#team">Team</a></li>
<li><a href="https://our.status.im/tag/research" target="_blank">Blog</a></li>
</ul>
<header class="dropdown">
<nav>
<ul>
<li><a href="#">Status App</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Desktop</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contribute</a></li>
</ul>
</li>
<li><a href="#">Embark</a>
<ul>
<li><a href="https://embark.status.im">About</a></li>
<li><a href="https://embark.status.im/docs">Docs</a></li>
<li><a href="https://our.status.im/tag/embark">Blog</a></li>
<li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
</ul>
</li>
<li><a href="https://our.status.im/tag/studio">Studio</a></li>
<li><a href="https://status.im/incubate">Incubate</a></li>
<li class="current"><a href="/">Nimbus</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="https://our.status.im/tag/research">Blog</a></li>
<li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
</ul>
</li>
<li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
<li><a href="https://our.status.im">Community</a></li>
</ul>
</nav>
</header>
</div>
<div class="secondary-nav">

View File

@ -187,11 +187,11 @@ select[multiple] {
position: absolute;
display: flex;
justify-content: space-between;
width: 1024px;
width: 1280px;
height: 56px;
left: 50%;
top: 0;
margin: 24px 0 0 -512px;
margin: 24px 0 0 -598px;
}
.header-left {
@ -245,34 +245,80 @@ select[multiple] {
color: white;
}
.main-nav {
.dropdown {
display: flex;
align-items: center;
margin-left: 32px;
}
.main-nav li {
margin: 16px;
.dropdown:before,
.dropdown:after {
clear: both;
content: "";
display: table;
}
.main-nav li:first-child {
margin-left: 0;
.dropdown nav ul li {
float: left;
margin: 8px;
position: relative;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav a {
.dropdown nav ul li a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.main-nav a:hover {
.dropdown nav ul li a:hover {
opacity: .7;
}
.dropdown nav ul li a:focus {
color: rgba(255, 255,255,1);
}
.dropdown nav ul li.current {
text-decoration: underline;
}
.dropdown nav ul li.current a {
color: rgba(255,255,255,0.7);
}
.dropdown nav ul li:hover > ul {
display: block;
}
.dropdown nav ul li ul {
background: #ffffff;
border-radius: 5px
display: none;
left: 0;
padding: 10px 5px 5px 5px;
position: absolute;
top: 100%;
border-top: 5px solid #ff9c00;
}
.dropdown nav ul li ul li {
float: none;
width: 8.125em;
}
.dropdown nav ul li ul li a:link,
.dropdown nav ul li ul li a:visited {
color: #8d99a4;
}
.dropdown nav ul li ul li a:hover {
color: #000;
}
.secondary-nav {
display: flex;
align-items: center;