防止由于Navbar而出现滚动条(溢出)

时间:2014-10-15 10:46:11

标签: jquery html css resize overflow

我正在建立一个网站,屏幕右侧始终显示一个Navbar。

它具有固定的大小,并且在某个屏幕宽度之前可以折叠。

随着溢出:隐藏我可以在棒可折叠时做我想要的但是当尺寸固定时我无法弄明白。

以下是一些代码:

#HTML
<nav>
    <ul class="links-to-floor">
        <li class="navCollapsed  navButton"><img src="img/feed_.png" alt="menu" /></li>
        <li class="list navButton"><a>Home</a></li>
        <li class="list navButton"><a>About me</a></li>
        <li class="list navButton"><a>Path</a></li>
        <li class="list navButton"><a>Skills</a></li>
        <li class="list navButton"><a>Portfolio</a></li>
        <li class="list navButton"><a>Contacts</a></li>
    </ul>
</nav>


#CSS 
ul {
    list-style: none;
}

li a {
    min-height:50px;
    min-width:50px;
    padding-top:40%;
    padding-bottom:40%;
    margin-bottom:5px;
    color: white;
    background-color:#222222;
    font-size:0.8em;
    display:inline-block;
}

.list{
    display:none;
}

.navCollapsed {
    min-height:50px;
    min-width:50px;
    margin-bottom:5px;
    display: inline-block;
    background-color:#303030;
}

.navCollapsed img{
    width:100%;
}

li a:hover{
    cursor:pointer;
    background:#fefefe;
}

.links-to-floor{
    min-width:60px;
    padding-top:5px;
    position: absolute;
    top:0;
    right:0;
    text-align:center;
    background:rgba(255,255,255,0.4);
    overflow:hidden;
}

@media only screen and (min-width: 780px) {

    .links-to-floor{
        right:5px;
        display:block;
        top:50%;
        margin-top:-257px;
        width:90px;
    }

    .list {
        display:inline-block;
    }

    li a {
        display:inline-block;
        padding-bottom:35px;
        padding-top:35px;
        width:80px;
        height:80px;
        line-height:10px;
    }

    .navCollapsed {
        display:none;
        width:80px;
        height:80px;
    }

}

#JS

$(window).resize(function(){
    setNavBar();
});

$(window).load(function(){
    setNavBar();
});

$('.navCollapsed').on('click', function() {
    if($('.list').is(':visible')){
        $('.list').hide();
        $('.links-to-floor').css('height', 'auto');
    } else {
        $('.list').css('display', 'inline-block');
        $('.links-to-floor').css('height', '100%');
    }
});

function setNavBar(){
    if (window.innerWidth >= 780) {
        $('.links-to-floor').css('width', '90px');
        $('.links-to-floor').css('height', 'auto');
        $('li a').css('width', '80px');
        $('li a').css('height', '80px');
        $('.navCollapsed').css('width', '80px');
        $('.navCollapsed').css('height', '80px');

    } else {
        $('.links-to-floor').css('width', (((window.innerHeight-(8*5))/7)+10)+'px');
        $('li a').css('width', (((window.innerHeight-(8*5))/7))+'px');
        $('li a').css('height', (((window.innerHeight-(8*5))/7))+'px');
        $('.navCollapsed').css('width', (((window.innerHeight-(8*5))/7))+'px');
        $('.navCollapsed').css('height', (((window.innerHeight-(8*5))/7))+'px');
    }
}

你可以在这里看到最新消息:filipesousacardoso.github.io

0 个答案:

没有答案