这使我疯了......按照本页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>
答案 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>
工作了。菜单现在按预期工作。页面加载时不显示,但单击按钮显示时显示完整。