wbrawner/flask-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed the mobile nav menu so that it wouldn't cause problems with page layout

Browse source
This commit is contained in:
William Brawner 2016-03-10 08:43:16 -06:00
parent 1e155009f6
commit 8280d8625e
2 changed files with 46 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/css/style.css
View file

@ -90,6 +90,11 @@ input[type='submit'] {
text-decoration:none; text-decoration:none;
} }
#menu-container {
overflow-x: hidden;
display: inline;
}
.main-nav ul { .main-nav ul {
float:right; float:right;
margin-top:-5px; margin-top:-5px;
@ -492,16 +497,16 @@ a.social-link:hover, a.social-link:active {
} }
#menu { #menu {
display:block; display:none;
width:100vw; opacity:0;
width:100%;
position: absolute; position: absolute;
top: 60px; top: 60px;
left: 100%;
padding:0; padding:0;
background-color:#002900; background-color:#002900;
float:none; float:none;
-webkit-transition: left 0.5s ease; -webkit-transition: opacity 0.5s ease;
transition: left 0.5s ease; transition: opacity 0.5s ease;
} }
#menu-icon { #menu-icon {

64
templates/master.html
View file

@ -27,32 +27,34 @@
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
<nav class="main-nav"> <nav class="main-nav">
<h1><a href="/">william brawner</a></h1> <h1><a href="/">william brawner</a></h1>
<a href="javascript:void(0)" id="menu-icon"><i class="fa fa-bars "></i></a> <a href="javascript:void(0)" id="menu-icon"><i class="fa fa-bars "></i></a>
<ul id="menu"> <div id="menu-container">
{% if session.logged_in and session.admin %} <ul id="menu">
<li> {% if session.logged_in and session.admin %}
<a href="{{ url_for('admin.home') }}">admin</a> <li>
</li> <a href="{{ url_for('admin.home') }}">admin</a>
{% else %} </li>
<li> {% else %}
<a href="{{ url_for('home') }}">home</a> <li>
</li> <a href="{{ url_for('home') }}">home</a>
{% endif %} </li>
<li> {% endif %}
<a href="{{ url_for('bio') }}">bio</a> <li>
</li> <a href="{{ url_for('bio') }}">bio</a>
<li> </li>
<a href="{{ url_for('projects') }}">projects</a> <li>
</li> <a href="{{ url_for('projects') }}">projects</a>
<li> </li>
<a href="{{ url_for('blog') }}">blog</a> <li>
</li> <a href="{{ url_for('blog') }}">blog</a>
<li> </li>
<a href="{{ url_for('contact') }}">contact</a> <li>
</li> <a href="{{ url_for('contact') }}">contact</a>
</ul> </li>
</ul>
</div>
</nav> </nav>
<div class="container"> <div class="container">
<div class="content"> <div class="content">
@ -83,11 +85,17 @@
var menuVisible = false; var menuVisible = false;
$('#menu-icon').click(function() { $('#menu-icon').click(function() {
if (menuVisible) { if (menuVisible) {
$('#menu').css({'left':'100%'}); $('#menu').css({'opacity':'0'});
setTimeout(function() {
$('#menu').css({'display':'none'});
}, 500);
menuVisible = false; menuVisible = false;
return; return;
} }
$('#menu').css({'left':'0'}); $('#menu').css({'display':'block'});
setTimeout(function() {
$('#menu').css({'opacity':'1'});
}, 100);
menuVisible = true; menuVisible = true;
}); });
}); });