我在 semantic-ui 中的固定顶部菜单有问题。它覆盖了一个 header 元素,上面写着“这是 Stoga Hub”。我认为 javascript 或 jQuery 不会提供任何帮助。我试过为菜单和标题元素弄乱 margin-top/bottom 并且它起作用了,但我知道如果我必须在每个网页上调整 margin-top/bottom 我的代码会变得非常困惑。如果这个答案真的很简单,我深表歉意,我对网站 build 还是很陌生。谢谢大家的帮助。
var main = function() {
$('.ui.dropdown').dropdown({
on: 'hover'
});
$('.item').click(function() {
$('.item').removeClass('active');
$(this).toggleClass('active');
});
$('.ui.checkbox')
.checkbox();
};
$(document).ready(main);
.main {
height: 600px;
background: linear-gradient(to right, #16a085, #2c3e50);
position: absolute;
/*margin-top: 78px;*/
}
.ui.header {
font-size: 65px;
}
body {
background-color: #ecf0f1;
color: white;
}
.segment {
background-position: 50% 50%;
margin: auto;
}
.menu {
padding-top: 8px;
padding-bottom: 8px;
color: maroon;
position: relative;
/*margin-bottom: 62px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Menu -->
<div class="ui large top fixed transparent menu">
<div class="ui container">
<a class="active item">"Logo"</a>
<div class="ui dropdown item">
<div class="text">Members</div>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://tesd.net/stoga">CHS Website</a>
<a class="item" href="http://stogamusic.com">Stoga Music</a>
<a class="item" href="http://stoga.net">Stoga Library Index</a>
<a class="item" href="http://spoke.news">Spoke News</a>
</div>
</div>
<div class="ui dropdown item">
<div class="text">Clubs</div>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="../Main%20Files/clubs.html">Club List</a>
<a class="item">Register a Club</a>
</div>
</div>
<div class="ui dropdown item">
<div class="text">Useful Stuff</div>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="https://pinnacle.tesd.net/Pinnacle/PIV/Logon.aspx?ReturnUrl=%2fPinnacle%2fPIV%2fDefault.aspx">Pinnacle</a>
<a class="item" href="https://connection.naviance.com/family-connection/auth/login/?hsid=conestoga">Naviance</a>
</div>
</div>
<div class="ui dropdown item">
<div class="text">About</div>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="../Main%20Files/whoWeAre.html">Who We Are</a>
<a class="item" href="../Main%20Files/Calendar.html">Calendar</a>
<a class="item" href="../Main%20Files/contact.html">Contact Us</a>
</div>
</div>
<div class="right menu">
<a class="item"><i class="sign in icon"></i>Login</a>
</div>
</div>
</div>
<div class="ui fluid main container">
<div class="segment">
<div class="ui container">
<h1 class="ui header">This is Stoga Hub</h1>
</div>
</div>
</div>
最佳答案
关于html - 如何使语义用户界面中的固定顶部菜单不覆盖内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36109541/