vagabond/the-internet-vagabond-dot-com
1
0
Fork 0
Code Issues 3 Pull requests Projects 2 Activity Actions

Update menu for extended usability

Browse source
This commit is contained in:
Bill Niblock 2015-07-16 15:57:06 -04:00
parent 3db8a07376
commit 7ed59ca017
2 changed files with 60 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
_layouts/default.html
View file

@ -31,10 +31,12 @@
<input type="checkbox" id="toggle-navbar" />
<div id="bar">
<section id="header">
<ul id="navigation">
<input type="radio" name="menu_buttons" id="mb_1" />
<div id="menu" name="navigation">
<ul id="nav_list">
<li><a href="http://www.theinternetvagabond.com">
Home</a></li>
<li>Projects</li>
<li><label for="mb_2" id="projs_label">Projects</label></li>
<ul id="projects">
<li>GitHub Page<br />
<div>
@ -55,7 +57,7 @@
</div>
</li>
</ul>
<li>Posts</li>
<li><label for="mb_3" id="posts_label"> Posts</label></li>
<ul id="posts">
{% for post in site.posts limit:3 %}
<li>
@ -65,6 +67,43 @@
{% endfor %}
</ul>
</ul>
</div>
<input type="radio" name="menu_buttons" id="mb_2" />
<div id="menu" name="projects_all">
<ul id="projects">
<li><label for="mb_1" id="nav_label">Main Menu</label></li>
<li>GitHub Page<br />
<div>
<a href="#">[ Page ]</a>
<a href="https://github.com/VagabondAzulien/VagabondAzulien.github.io">[ Source ]</a>
</div>
</li>
<li>Dot Files<br />
<div>
<a href="#">[ Page ]</a>
<a href="#">[ Source ]</a>
</div>
</li>
<li>Antennae<br />
<div>
<a href="#">[ Page ]</a>
<a href="https://github.com/VagabondAzulien/antennae">[ Source ]</a>
</div>
</li>
</ul>
</div>
<input type="radio" name="menu_buttons" id="mb_3" />
<div id="menu" name="posts_all">
<ul id="posts">
<li><label for="mb_1" id="nav_label">Main Menu</label></li>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">
{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</section>
<section id="footer">
<div id="follow">

24
src/styles.css
View file

@ -25,7 +25,7 @@ a,a:visited,a:link,a:focus {
header {
position: fixed; top: 0px; left: 0px; right: 0px;
margin: 0px; padding: 10px; z-index: 5;
margin: 0px; padding: 10px; z-index: 1;
background-color: white;
border-bottom: 1px solid lightgrey;
box-shadow: 0px 2px 10px -5px blue;
@ -57,7 +57,7 @@ header {
#navbar {
position: fixed; top: 0px; right: 0px; bottom: 0px;
width: 400px; margin: 0px; padding: 0px; z-index: 10; opacity: 100%
width: 400px; margin: 0px; padding: 0px; z-index: 2; opacity: 100%
}
#navbar #bar {
@ -73,7 +73,7 @@ header {
#navbar #toggle {
position: absolute; right: 0px;
margin: 0px; padding: 13px 25px; z-index: 11;
margin: 0px; padding: 13px 25px; z-index: 3;
font: 1.3em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; text-shadow: 0px 0px 5px white;
}
@ -87,11 +87,15 @@ header {
width: 100%;
}
#navigation {
#menu {
position: absolute; top: 12%; bottom: 18%; left: 0px; right: 0px;
list-style: none;
margin: 10px;
color: darkgrey;
z-index: 4;
color: darkgrey; background-color: #202020;
}
#nav_list {
list-style: none;
}
#navigation a:link,a:visited,a:focus {
@ -134,6 +138,14 @@ header {
font-style: italic;
}
[name=menu_buttons] {
display: none; }
[name=menu_buttons]:checked + #menu {
z-index: 5;
}
#bar #footer {
position: absolute; bottom: 0px;
width: 100%;