Question

我希望在我正在帮助维护的网站中创建一个悬停菜单。这是导航条形码。我希望“与我们合作”有几个下拉菜单选项。有什么建议？我试过这个，但没有运气。 https://www.w3schools.com/howto/howto_js_dropdown.asp

  <div id="navtoggle">
    <div class="row justify-content-between align-items-center navlinkdiv">
        <div>
                <a href="/uwchips" class="svgbtn" title="Go to main home page"><img class="svgicon" src="/uwchips/img/home.svg" alt="home icon" /></a>
            </div>
        <div>
            <a href="#thenavbar" class="svgbtn navbar-toggler" data-toggle="collapse" title="expand and collapse menu"><img class="svgicon" src="/uwchips/img/hamburger.svg" alt="expand menu icon" /></a>
            </div>
    </div>
</div>

<div id="thenavbar" class="collapse">
    <h2 class="offscreen">Site Navigation</h2>
    <div id="topnavlist" class="navbar-nav align-content-between align-items-center">
        <div class="nav-item"><a class="nav-link" href="/uwchips/">Home</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/about-us">About Us</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/people">People</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/projects">Projects</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/work-with-us">Work With Us</a>
        <div class="nav-item"><a class="nav-link" href="/uwchips/products">Products</a></div>
    </div>
</div>

Answer 1

使用一些简单的CSS代码非常容易。不过，我已经编辑了你的html，因为除非两个元素在同一级别上，否则它不起作用，但它的要点是：你有你的悬停元素：

proc noop {chan addr port} {
}
set chan [socket -server noop 0]
set sockname [chan configure $chan -sockname]
chan close $chan
set port [lindex $sockname end]         ;# e.g. 51922
set chan2 [socket -server noop $port]   ;# test re-usability of port
chan close $chan2

然后你有实际导航栏的div：

<a href="#thenavbar" class="navbar-toggler" data-toggle="collapse" 
title="expand and collapse menu"><img class="svgicon" 
src="http://www.iconarchive.com/download/i86425/martin-berube/flat-
animal/duck.ico" alt="expand menu icon" width="50px"/></a>

现在您已经拥有了它，您可以添加CSS代码：

<div id="thenavbar" class="collapse">
<h2 class="offscreen">Site Navigation</h2>
<div id="topnavlist" class="navbar-nav align-content-between align-items-center">
    <div class="nav-item"><a class="nav-link" href="#example">Home</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">About Us</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">People</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">Projects</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">Work With Us</a>
    <div class="nav-item"><a class="nav-link" href="#example">Products</a></div>
</div>

成品在下方，将鼠标悬停在鸭子上会显示导航栏：

＆＃13;

#thenavbar {
  visibility:hidden;
  position:absolute;
  top:30px;
}

.navbar-toggler:hover ~ #thenavbar {
  visibility:visible;
}

＆＃13;

#thenavbar {
  visibility:hidden;
  position:absolute;
  top:30px;
}

 .navbar-toggler:hover ~ #thenavbar {
  visibility:visible;
  
}

#thenavbar:hover {
  visibility:visible;
}

＆＃13;

悬停下拉菜单

1 个答案: