修改octopress导航栏

本人想做一个类似本博客中 导航栏的这个下拉选项效果

0x00 添加下拉框

导航栏页面 /source/_include/header.html

在h1标签下添加下拉框

    <nav id="K_select">
    <div class="alignleft menu">
        <a class="button">Category</a>
        <div class="container">\{\% include navigation.html %\}\</div>
    </div>
    <div class="alignright search">
        <a class="button"></a>
        <div class="container">
            <form action="\{\{\ site.simple_search \}\}\" method="get">
                <input type="text" name="q" results="0">
                <input type="hidden" name="q" value="site:\{\{\ site.url | shorthand_url \}\}\">
            </form>
        </div>
    </div>
    </nav>

0x01 设置相关css

css/source/styleshets/screen.css

#K_select
 {
display: block
}

#K_select a
{
display: block
}

#K_select .button
{
cursor: pointer
}

#K_select .container
{
display: none
}

#K_select .menu
{
position: relative;
width: 150px;
margin-left:175px;
}

#K_select .menu .button
{
background: #f2f2f2;
border: 1px solid #ddd;
color: #999;
padding: 0 60px 0 10px;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px
}

#K_select .menu .button:hover
{
color: #999
}

#K_select .menu .button.on
{
color: #666;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
-ms-border-radius: 5px 5px 5px 0;
-o-border-radius: 5px 5px 5px 0;
border-radius: 5px 5px 5px 0
}

#K_select .menu .button.on:before
{
content: "\f077"
}

#K_select .menu .button:before
{
content: "\f078";
color: #ddd;
font: 16px FontAwesome;
line-height: 30px;
position: absolute;
top: 0;
right: 40px
}

#K_select .menu .container
{
background: #f2f2f2;
border: 1px solid #ddd;
border-top: none;
position: absolute;
top: 31px;
z-index: 1;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px
}

#K_select .menu .container ul
{
list-style: none
}

#K_select .menu .container ul ul
{
margin-left: 20px
}

#K_select .menu .container a
{
padding: 0 10px
}

#K_select .search
{
position: absolute;
/*top: 0;
right: 0*/
}

#K_select .search .button
{
background: #ddd;
width: 30px;
height: 30px;
position: absolute;
/*top: 1px;
right: -1px;*/
margin-top: 1px;
margin-left: 315px;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-ms-border-radius: 0 5px 5px 0;
-o-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0
}

#K_select .search .button:before
{
content: "\f002";
color: #f2f2f2;
font: 20px FontAwesome;
line-height: 30px;
position: absolute;
top: 0;
left: 7px
}

#K_select .search .button.on
{
background: #ccc
}

#K_select .search .button.on:before
{
content: "\f00d"
}

#K_select .search .container
{
padding-left: 190px;
/*position: absolute;
right: 51px;*/
z-index: 1
}

#K_select .search input[type="text"]
{
background: #fff;
border: 1px solid #ddd;
border-right: none;
color: #999;
font: 13px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
height: 30px;
width: 100%;
padding: 0 10px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-ms-border-radius: 5px 0 0 5px;
-o-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px
}

#K_select .search input[type="text"]:focus,#K_select .search input[type="text"]:active
{
background: #fff;

color: #666;
outline: none
}

@media screen and (max-width: 600px)
{
#K_select
{
   display: none !important;
}
}

@media screen and (min-width: 600px)
{
#header {
    height: 30px !important;
}
#header h1
{
    float: left !important;
}

#main-nav {
    float: left !important;
    margin-left: 30px;
    margin-top: 0px;
}
}

0x02 设置JS

文件 /sourece/javascripts/slash.js在function内添加以下代码

var k_select = $('#K_select');

$('html').click(function(){
    k_select.find('.on').each(function(){
        $(this).removeClass('on').next().hide();
    });
});

k_select.on('click', '.menu .button', function(){
    if (!$(this).hasClass('on')){
        var width = $(this).width() + 42;
        $(this).addClass('on').next().show().css({width: width});
    } else {
        $(this).removeClass('on').next().hide();
    }
}).on('click', '.search .button', function(){
    if (!$(this).hasClass('on')){
        var width = 120;
        k_select.children('.menu').children().eq(0).removeClass('on').next().hide();
        $(this).addClass('on').next().show().css({width: width}).children().children().eq(0).focus();
    } else {
        $(this).removeClass('on').next().hide().children().children().eq(0).val('');
    }
}).click(function(e){
    e.stopPropagation();
});

0x03 遍历分类目录

/source/_include/custom/navigation.htmlul标签内

    \{\% for category in site.categories \%\}
<li><a href="\{\{ root_url \}\}/blog/categories/\{\{ category | first \}\}">\{\{ category | first \}\}</a></li>
\{\% endfor \%\}

参考资料

遍历分类http://segmentfault.com/a/1190000000406017

octopress

Comments