Creating a dropdown menu purely with HTML + CSS

Question

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>

@AlvaroMontoro correct. When the user selects the option from the dropdown, it will redirect them to that relevant part of the website! — Moods762
– Moods762, Commented Dec 12, 2018 at 22:22

Millhorn · Accepted Answer · 2018-12-11 07:12:36Z

1

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>

answered Dec 11, 2018 at 7:12

Millhorn

3,1767 gold badges46 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhargav Chudasama Over a year ago

what is new in your answer please explain?

Millhorn Over a year ago

I added an onchange event to the <select>. Just look at the code and my codepen example. Please mark the answer correct if it's what you're looking for.

Moods762 Over a year ago

@webfrogs this checks out! Thank you so much for being able to do this, much appreciated!

Millhorn Over a year ago

Sure thing. Anytime.

לבני מלכה · Accepted Answer · 2018-12-11 07:47:07Z

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>

Kevin Abou Hanna · Accepted Answer · 2018-12-11 07:57:26Z

0

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.

edited Dec 11, 2018 at 7:57

answered Dec 11, 2018 at 7:50

Kevin Abou Hanna

1361 silver badge6 bronze badges

1 Comment

Millhorn Over a year ago

That's not what the question asked for.

Collectives™ on Stack Overflow

Creating a dropdown menu purely with HTML + CSS

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related