纯粹使用 HTML + CSS 创建下拉菜单

Question

我对此很陌生，如果这个问题看起来很初级，请提前道歉！由于我是一个热心的学习者，我很感激在这方面能得到的所有帮助:)

我一直在尝试创建两个下拉菜单，它们将在我公司网站的主页上显示为内联元素。似乎已禁用 Javascript 进行编辑（因为我之前曾尝试使用 Codepen 中的预制下拉菜单）。

我希望用户只需点击下拉菜单，然后他们点击的选项会将他们带到网站的相关部分。

这是我目前创建的 HTML。我希望将此下拉列表保留为 HTML 和 CSS。

提前谢谢大家！ :)

 <div class=" col-xs-12 cold-md-6">
    <select role="menu" id="dropdownMenuElement_10990" class="form-control input-lg " style> == $0
        <option value="/">Looking for a product?</option>
        <option value="/3dexperience">3DEXPERIENCE</option>
        <option value="/catia">CATIA</option>
        <option value="/enovia">ENOVIA</option>
        <option value="/delmia">DELMIA</option>
        <option value="/dymola">DYMOLA</option>
        <option value="/reqtify">REQTIFY</option>
        <option value="/controlbuild">CONTROLBUILD</option>
        <option value="/exalead">EXALEAD</option>
        <option value="/netvibes">NETVIBES</option>
        <option value="/master-3dgage">MASTER 3DGAGE</option>
        <option value="/verisurf">VERISURF</option>
        </select>
  
     
    </div>

Answer 1

下面的 sn-p 将起作用。这是一个带有有效链接的 codepen（点击 3dexperience）。

<div class=" col-xs-12 cold-md-6">
    <select role="menu" id="dropdownMenuElement_10990" class="form-control input-lg" onchange="location = this.value;">
          <option value="/">Looking for a product?</option>
          <option value="/3dexperience">3DEXPERIENCE</option>
          <option value="/catia">CATIA</option>
          <option value="/enovia">ENOVIA</option>
          <option value="/delmia">DELMIA</option>
          <option value="/dymola">DYMOLA</option>
          <option value="/reqtify">REQTIFY</option>
          <option value="/controlbuild">CONTROLBUILD</option>
          <option value="/exalead">EXALEAD</option>
          <option value="/netvibes">NETVIBES</option>
          <option value="/master-3dgage">MASTER 3DGAGE</option>
          <option value="/verisurf">VERISURF</option>
        </select>     
    </div>

Answer 2

在更改时使用select 然后滚动窗口到您想要将部分的 id 设置为选项值的 div 部分的 id

使用 Jquery

$('#selectBox').change(function() {   
   var selectedValue = $(this).val(); 
   var elem=$('#'+selectedValue)
   $('html, body').scrollTop(elem.offset().top);
   
});

select{
position:fixed;
top:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=" col-xs-12 cold-md-6">
    <select id="selectBox" role="menu" id="dropdownMenuElement_10990" class="form-control input-lg "> 
        <option value="/">Looking for a product?</option>
        <option value="3dexperience">3DEXPERIENCE</option>
        <option value="catia">CATIA</option>
        <option value="enovia">ENOVIA</option>
        <option value="delmia">DELMIA</option>
        <option value="dymola">DYMOLA</option>
        <option value="reqtify">REQTIFY</option>
        <option value="controlbuild">CONTROLBUILD</option>
        <option value="exalead">EXALEAD</option>
        <option value="netvibes">NETVIBES</option>
        <option value="master-3dgage">MASTER 3DGAGE</option>
        <option value="verisurf">VERISURF</option>
        </select>
  
     
    </div>
    
<div id="lookingFor">
<h1>lookingFor</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="3dexperience">
<h1>3dexperience</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="catia">
<h1>catia</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="enovia">
<h1>enovia</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>

Answer 3

看起来您正在使用引导程序，并且由于您只需要 HTML 和 CSS 解决方案，因此您应该使用此处的引导程序文档中提供的代码：

https://getbootstrap.com/docs/4.0/components/dropdowns/

例子：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#potato">Potato</a>
    <a class="dropdown-item" href="#xxx">XXX</a>
    <a class="dropdown-item" href="#zzz">ZZZ</a>
  </div>
</div>

假设当你点击 Potato 时，你想进入你网站的土豆部分，你所要做的就是给土豆部分一个类似于上面链接中传递的 href 的 id，如果section是一个外部页面，您只需在下拉项的href中传递页面上的链接即可。