CODEWITHSUNDEEP
htmlcssmenudropdown
Moods762
Moods762

Reputation: 39

Creating a dropdown menu purely with HTML + CSS

I am very new to this so apologies in advance if this problem appears quite rudimentary! I appreciate all the help I can get on this as I am a keen learner :)

I have been trying to create two dropdown menu's that would appear as inline elements on the homepage of my company website. It appears that Javascript has been disabled for editing (as I have tried to previously use pre-made dropdown menus from Codepen).

I want users to simply click on the dropdown and then the option they click on will take them to that relevant part of the website.

This is the HTML I have created so far. I am hoping to keep this dropdown to HTML and CSS.

Thanks guys in advance! :)

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

Upvotes: 1

Views: 151

Answers (3)

Kevin Abou Hanna
Kevin Abou Hanna

Reputation: 136

It looks like you're using bootstrap and since you want an HTML and CSS solution only so then you should use the code provided from bootstrap documentation here:

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

Example: 

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

And let's say that when you click on Potato you want to get to the potato section of your website, all you have to do is to give the potato section an id similar to the href passed in the above link, and if the section is an external page you just pass the link on the page in the href of the dropdown item.

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16261

Use on change select then scroll window to id of your div section that you want set the id of section as value of option

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>

Upvotes: 0

Millhorn
Millhorn

Reputation: 3176

The snippet below will work. Here's a codepen with a working link (click 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>

Upvotes: 1

Related Questions