Bootstrap 在悬停显示子菜单上引导侧栏

bsxbgnwa 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(188)

我在bootstrap中有这样的边栏
JSFIDDLE链接：http://jsfiddle.net/akcncxqb/

<div class="portfolio-home">
            <div class="row-offcanvas row-offcanvas-left">
              <div id="sidebar" class="sidebar-offcanvas">
                  <div class="portfolio-menu-content">
                    <ul class="nav">
                    <li><center><h1><img src="/small-logo.png" height="30" width="40px"></h1>FexFree</center></li>
                      <li><center><h1><i class="fa fa-home fa-5"></i></h1>Home</center></li>
                      <li>
                        <center>
                            <h1>
                                <i class="fa fa-briefcase fa-5"></i>
                            </h1>Projects
                        </center>
                         <ul class="sub-menu">
                                                    <li><center><h1><i class="fa fa-calendar fa-5"></i></h1>Gallery</center></li>
                                                    <li><center><h1><i class="fa fa-envelope-o fa-5"></i></h1>Contact</center></li>
                        </ul>
                      </li>
                      <li><center><h1><i class="fa fa-calendar fa-5"></i></h1>Gallery</center></li>
                      <li><center><h1><i class="fa fa-envelope-o fa-5"></i></h1>Contact</center></li>
                    </ul>
                  </div>
              </div>
            </div><!--/row-offcanvas -->
        </div>

在悬停的产品，我想显示子菜单的权利，以侧边栏，而不是下面的菜单，我想子菜单的右侧，侧边栏菜单项项目。

twitter-bootstrap

来源：https://stackoverflow.com/questions/28292280/bootstrap-sidebar-on-hover-show-submenu

1条答案

按热度按时间

zte4gxcn1#

试试下面代码：http://jsfiddle.net/akcncxqb/1/

.portfolio-home {
     min-width: 100%;
     max-width: 100%;
     min-height: 100%;
     /*max-height: 100%;*/
     /*background-image: url('/home/slider/user_back.png');*/
 }

 .portfolio-menu-content {
     margin: 10px;
 }

 .portfolio-menu-content i,
 .portfolio-menu-content li {
     color: #fff;
     cursor: pointer;
 }

 .portfolio-menu-content h1 {
     margin-bottom: 0px;
 }

 #sidebar {
     min-width: 120px;
     max-width: 120px;
     background-color: #3CC122;
     /*float: left;*/
     margin-left: 5%;
     min-height: 60%;
     max-height: 60%;
     position: relative;

 }

 .sub-menu {
     background-color: green;
     display: none;
     list-style: outside none none;
     margin: 0;
     padding: 0 20px;
     position: absolute;
     right: -89px;
     top: -18px;
 }

 .nav>li:hover .sub-menu {
     display: block;
 }

 .portfolio-menu-content {
     margin: 10px 0;
 }

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 在悬停显示子菜单上引导侧栏

1条答案

相关问题

热门标签

最新问答