主页内容加载时左侧导航菜单消失,为什么?

时间:2014-09-26 09:47:52

标签: html css html5 css3

这使我疯了......按照本页http://kudosoo.com/twofolio.html

左侧导航设备正常工作存在问题。加载后菜单的顶部会消失。我试过用不同的方法调整css和html来解决这个问题,但到目前为止还没有任何工作。

我认为它与#container或者dwon菜单在页面上显示的方式相关联,似乎位于菜单的顶部。

感谢任何帮助。

主页面代码如下。示例页面在这里

<div id="preloader">
    <div id="status">
        <p class="center-text">
            Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>


<div class="all-elements">
    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="sidebar-controls">
                <a href="https://www.facebook.com/Kudosoo?fref=ts" target="blank" class="sidebar-face"></a>
                <a href="https://twitter.com/kudosoo" target="blank" class="sidebar-twit"></a>
                <a href="#" class="sidebar-close"></a>
            </div>


            <div class="sidebar-header">
                <img class="sidebar-logo round-decoration" src="images/general-nature/8s.jpg" alt="img">
                <h4 class="center-text">kudosoo</h4>
                <em class="center-text">Get badged today</em>
            </div>

            <div class="sidebar-breadcrumb">
                <div class="sidebar-decoration"></div>
                <p>Navigation</p>
                <div class="sidebar-decoration"></div>
            </div>

            <div class="navigation-items"></div>
            <div class="nav-item">
                <a href="http://kudosoo.com/user_home.html" class="home-nav">Home<em class="unselected-nav"></em></a>
            </div>
            <div class="sidebar-decoration"></div>
            <div class="nav-item">
                <a href="#" class="features-nav submenu-deploy">Activity<em></em></a>
                <div class="nav-item-submenu active-submenu">
                    <div class="sidebar-decoration"></div>
                    <a href="mybadges.html">Received          <em class="unselected-sub-nav"></em></a>
                    <a href="awardedbadges.html">Awarded        <em class="unselected-sub-nav"></em></a>
                    <a href="friends.html">Friends       <em class="unselected-sub-nav"></em></a>
                </div>
            </div>
            <div class="sidebar-decoration"></div>
            <div class="nav-item">
                <a href="http://kudosoo.com/selectbadge.html">Select Badge<em class="dropdown-nav"></em></a>
                <div class="nav-item-submenu">
                    <div class="sidebar-decoration"></div>
                    <a href="widefolio.html">Wide item Portfolio        <em class="selected-sub-nav"></em></a>
                </div>
            </div>
            <div class="sidebar-decoration"></div>
            <div class="nav-item">
                <a href="user_profile.html" class="contact-nav">My Profile<em class="unselected-nav"></em></a>
            </div>
            <div class="sidebar-decoration"></div>
            <div class="nav-item">
                <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a>

            </div>
        </div>



        <div class="sidebar-breadcrumb">
            <div class="sidebar-decoration"></div>
            <p>Let's get social!</p>
            <div class="sidebar-decoration"></div>
        </div>

        <div class="navigation-items">
            <div class="nav-item">
                <a href="https://www.facebook.com/Kudosoo?fref=ts" target="blank" class="facebook-nav">Facebook<em class="link-nav"></em></a>
            </div>
            <div class="sidebar-decoration"></div>
            <div class="nav-item">
                <a href="https://twitter.com/kudosoo" target="blank" class="twitter-nav">Twitter<em class="link-nav"></em></a>
            </div>
        </div>

        <div class="sidebar-decoration"></div>

        <p class="sidebar-copyright center-text">Copyright 2014.
            <br>All rights reserved.</p>

    </div>
</div>


<div id="content" class="page-content">
    <div class="content-controls solid-color fixed-header">
        <a href="#" class="deploy-sidebar"></a>
        <em class="content-title">Who's getting Kudosoo today?!</em>
        <a href="index.html" id="logout" class="deploy-contact button-icon icon-setting button-orange">LogOut</a>
    </div>
    <div class="fixed-header-clear"></div>

    <!---HTML code not to change ends-->

    <div class="content">


        <div id="container">
        </div>


        <!--Search options to find firends, requests and rejections-->

        <div id="friendsfilter">
            <form id="friendsfilter">
                <div class="error" style="display:none"></div>

                <div class="form-group">
                    <div class="input-group input-group-hg input-group-rounded">
                        <span class="input-group-btn">
                                <button id="find_button" type="button" class="btn"><span class="fui-search"></span>
                        </button>
                        </span>
                        <input type="text" id="friendsearch" placeholder="Find Friend" class="form-control" />
                    </div>
                </div>

                <select name="huge" class="btn-group select select-block mbl select-multiple" id="s_Friends">
                    <option value="0">Click to manage friend connections</option>
                    <option value="f_connected">Friends</option>
                    <option value="f_requests">Requests</option>
                    <option value="f_rejected">Declined</option>
                    <option value="f_sent">Sent</option>
                </select>

                <div id="FriendsConnected"></div>
                <div id="FriendsPending"></div>
                <div id="FriendsRejected"></div>
                <div id="FriendsSent"></div>
            </form>
        </div>


        <!--Friends profile info and stats-->

        <div id="container friendsProfile">
            <form>
                <div class="error" style="display:none"></div>
                <button id="friendsProfile" class="button button-red">Unfriend</button>
            </form>
        </div>



        <!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->

        <div id="container">

            <img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image">

            <div id="userimgs"></div>

        </div>

        <div id="container" class="container no-bottom">
            <!---List of connected friends is generated from script  below, the different divs split the results depending which button is clicked-->

            <div id="containerFriends"></div>
            <div id="containerFriendsPending"></div>
            <div id="containerFriendsRejected"></div>
            <div id="containerFriendsRequestSent"></div>
            <div id="containerFriendsConnected"></div>
            <div id="containerFriendsProfile"></div>


        </div>


        <!--Displays friends uploaded badges after the user clicks on their profile picture-->

        <div id="container">

            <div id="badgeimgs"></div>

        </div>

    </div>
</div>
</div>
</div>



<!--Footer stuff-->

<div class="container">
    <div type="button" id="decline" class="btn btn-danger mrs"></div>
    <div class="footer-socials">
        <a href="#" class="facebook-footer"></a>
        <a href="#" class="goup-footer"></a>
        <a href="#" class="twitter-footer"></a>
    </div>
    <p class="copyright uppercase center-text no-bottom">Copyright 2014
        <br>All rights reserved</p>

</div>
<div style="height:350px"></div>
</div>
</div>

4 个答案:

答案 0 :(得分:1)

所以,正如我所看到的......实际上,当页面加载时导航不应该显示,对吗?当主页面内容向右滑动时显示导航?

z-index用于在HTML中对div层进行排序。数字越高,前进越多越好。它将被放置在页面上(从前到后)。

目前,您的<div id="content">的z-index为10,而<div id="sidebar">的z-index为2。

这意味着您的内容div将放置在补充工具栏的前面,导致侧边栏的顶部被隐藏。

更改CSS文件中的这些值将改变顺序。

.page-content位于style.css文件的第9行 .page-sidebar位于style.css文件的第25行

答案 1 :(得分:0)

使侧边栏的Z-index为11.您的页面内容的z-index为10

<div id="sidebar" style="z-index:11" class="page-sidebar">

答案 2 :(得分:0)

我认为在第135行你关闭了错误的

从第135行删除结束div并将其放在第162行的侧边条代码的末尾

<div class="nav-item">
                    <a href="#" class="close-nav">Close<em class="unselected-nav"></em></a>

                </div>
            </div>

答案 3 :(得分:0)

我实际上是通过将<div style="height:350px"></div>调整为

来解决这个问题

<div style="height:3350px"></div>工作了。菜单现在按预期工作。页面加载时不显示,但单击按钮显示时显示完整。