我尝试使用boostrap 4的superfish并更新响应使用。 我插入了这段代码但是效果不好。
你有想法改变元素吗?
由于
<style>
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
height:1.50rem;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
border-left: 1px;
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
border-top: 1px;
padding: .75em 1em;
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #373a3c;
font-size: 13px;
vertical-align: middle;
}
.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: none;
transition: none;
font-size: 13px;
height:30px;
}
.sf-menu ul li {
background-color: #eee;
}
.sf-menu ul ul li {
background-color: #eee;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
/* background-color: #747474;*/
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
.backgroundSuperfish {
background-image: url(../images/menu_superfish.gif);
height:1.90rem;
}
.headerLine {
background-color: #FF0000;
height:0.05rem;
}
.current {
color:#fff;
font-size: 13px;
padding-left: 10px;
padding-top: 5px;
}
.current li:hover,
.current li.sfHove {
background-color: #FFEEC2;
color:#747474;
}
.subLevel {
color:#373a3c;
font-size: 13px;
padding-bottom: 5px!important;
}
.subLevel li:hover,
.subLevel li.sfHover{
background-color: #FFEEC2;
color:#747474;
}
.topLevel {
color:#373a3c;
font-size: 13px;
padding-bottom: 5px!important;
}
.topLevel li:hover,
.topLevel li.sfHover {
background-color: #FFEEC2;
color:#747474;
}
.imageheaderMenu {
}
</style>
使用boostrap4的HTML代码
<div class="backgroundSuperfish">
<nav class="navbar">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#responsiveCollapse">☰</button>
<div class="collapse navbar-toggleable-xs" id="responsiveCollapse"> <!-- class .navbar-toggleable-* -->
<span class="pull-md-left">
<ul class="nav navbar-nav sf-menu" id="example">
<li class="nav-item current">Home
<ul>
<li class="nav-item topLevel"><span><a href="../index.php">Store</a></span></li>
<li class="nav-item topLevel"><span><a href="index.php">Back Office</a></span></li>
</ul>
</li>
<li class="nav-item current">Configuration
<ul>
<li class="nav-item current subLevel"><span class="imageheaderMenu"><img src="/images/menu/configuration.gif" alt="" height="10" /> </span><span>My store</span>
<ul>
<li class="nav-item topLevel"><a href="configuration.php?gID=1">General configuration</a></li>
<li class="nav-item topLevel"><a href="configuration.php?gID=25">Laws & regulations</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</span>
</div>
</nav>
</div>
带有superfish的脚本
<script>
jQuery(function(){
jQuery('#example').superfish({
});
});
</script>