diff options
| author | SkyArrow <tommy351@gmail.com> | 2012-01-24 18:23:47 +0100 |
|---|---|---|
| committer | SkyArrow <tommy351@gmail.com> | 2012-01-24 18:23:47 +0100 |
| commit | 7c05b0a627b22f227084d5144e9eb0879c920a68 (patch) | |
| tree | 73491895f8a94d437332e7a1a8026b2eca0f2c08 | |
| parent | a63d03908153e5d0f2825d5972d726e92f2ad92c (diff) | |
| download | octopress-theme-jeyzu-7c05b0a627b22f227084d5144e9eb0879c920a68.zip octopress-theme-jeyzu-7c05b0a627b22f227084d5144e9eb0879c920a68.tar.gz | |
<select> menu for mobile devices
| -rw-r--r-- | sass/parts/_header.scss | 16 | ||||
| -rw-r--r-- | source/_includes/custom/after_footer.html | 5 | ||||
| -rw-r--r-- | source/javascripts/navigation.js | 16 |
3 files changed, 33 insertions, 4 deletions
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index a258e9d..3f73710 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -27,8 +27,8 @@ header{ } } >a{ - padding: 35px 30px 35px 0; - margin-top: -35px; + padding: 38px 30px 38px 0; + margin-top: -38px; background: image-url('detail.png') right center no-repeat; &:only-child{ padding-right: 0; @@ -77,6 +77,10 @@ header{ } } } + select{ + display: none; + margin-bottom: 10px; + } } .search{ input[type="text"]{ @@ -183,6 +187,14 @@ header{ @media screen and (max-width: 600px){ header{ + nav{ + >ul{ + display: none; + } + select{ + display: block; + } + } .social{ display: none; } diff --git a/source/_includes/custom/after_footer.html b/source/_includes/custom/after_footer.html index cb1277b..50003bb 100644 --- a/source/_includes/custom/after_footer.html +++ b/source/_includes/custom/after_footer.html @@ -1,5 +1,6 @@ <script src="{{ root_url }}/javascripts/jquery.easing.1.3.js"></script> <script src="{{ root_url }}/javascripts/external.js"></script> -<script src="{{ root_url }}/javascripts/twitter.js"></script> +<script src="{{ root_url }}/javascripts/navigation.js"></script> <script src="{{ root_url }}/javascripts/jquery.fancybox.pack.js"></script> -<script src="{{ root_url }}/javascripts/caption.js"></script>
\ No newline at end of file +<script src="{{ root_url }}/javascripts/caption.js"></script> +<script src="{{ root_url }}/javascripts/twitter.js"></script>
\ No newline at end of file diff --git a/source/javascripts/navigation.js b/source/javascripts/navigation.js new file mode 100644 index 0000000..546edf1 --- /dev/null +++ b/source/javascripts/navigation.js @@ -0,0 +1,16 @@ +(function($){ + var appends = '<option>選單</option>'; + + $('.menu .main > li').each(function(){ + var link = $(this).children('a'); + appends += '<option value="'+link.attr('href')+'">'+link.html()+'</option>'; + $(this).find('li').each(function(){ + var link = $(this).children('a'); + appends += '<option value="'+link.attr('href')+'">- '+link.html()+'</option>'; + }); + }); + + $('nav.menu').append('<select>'+appends+'</select>').on('change', 'select', function(){ + location.href = $(this).val(); + }); +})(jQuery);
\ No newline at end of file |