Создание выпадающего меню исключительно с 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

Используйте при изменении select, затем прокрутите окно до идентификатора вашего раздела div, для которого вы хотите установить идентификатор раздела в качестве значения параметра

Using 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 2

Похоже, вы используете загрузчик, и поскольку вам нужно только решение для 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>

И скажем, что когда вы нажимаете на Картофель, вы хотите попасть в раздел картофеля на своем веб-сайте, все, что вам нужно сделать, это присвоить идентификатору секции картофеля идентификатор.аналогично href, указанному в приведенной выше ссылке, и если раздел является внешней страницей, вы просто передаете ссылку на страницу в href выпадающего элемента.

Answer 3

Фрагмент ниже будет работать.Вот кодекс с рабочей ссылкой (нажмите 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>