Creating a dropdown without using a select box

Question

I want to put multiple distinct pages into one html page. I have each page option in a dropdown and then when you select the item the content for that item appears. Right now I'm using a select box for the dropdown, but is there anyway I can make a dropdown for this without using select? I would like to add customizations to the dropdown that you cant do if you are using a select box. **I want the dropdown to still include all of my distinct page

This is kind of what I'm trying to get the dropdown to look like. Centered, and when the dropdown appears there is no border and the background is white so it looks like it is apart of the page. I would like to change the font of all the items, etc.

jsfiddle - https://jsfiddle.net/

$("#drop").on('change', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drop">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

Have you tried styling the select with CSS? All the customizations you mentioned should be possible with a standard select... — Milney
– Milney, Commented Jun 28, 2017 at 14:54
Yes I have tried, but you can't center the text. And you can't style the actual select dropdown box. — user7548188
– user7548188, Commented Jun 28, 2017 at 14:58
@user7548188 Check out my article: Evolution of Drop Down Menus and Exiting Them. Does it help? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jun 28, 2017 at 15:00

Nick De Jaeger · Accepted Answer · 2017-06-28 15:08:20Z

1

$('.selectbox__selected').click(function() {
  $('.selectbox__values').toggle();
});

$('.selectbox__item').click(function() {
  var value = $(this).text();
  
  $('.selectbox__selected').attr('data-value', value);
  $('.selectbox__selected').html(value);
  
  $('.selectbox__values').toggle();
});

* {
  box-sizing: border-box;
  margin: 0;
}

.selectbox {
  position: relative;
  width: 200px;
  height: 30px;
}

.selectbox__selected {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  text-align: center;
}

.selectbox__values {
  position: absolute;
  top: 30px;
  width: 200px;
  display: none;
  text-align: center;
}

.selectbox__item {
  padding: 5px;
  width: 100%;
  height: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectbox">
  <div class="selectbox__selected" data-value="value 0">value 0</div>
  <div class="selectbox__values">
    <div class="selectbox__item" data-value="value 1">value 1</div>
    <div class="selectbox__item" data-value="other value 2">oteher value 2</div>
    <div class="selectbox__item" data-value="another value 3">another value 3</div>
  </div>
</div>

edited Jun 28, 2017 at 15:08

answered Jun 28, 2017 at 14:55

Nick De Jaeger

1,24910 silver badges13 bronze badges

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

1 Comment

user7548188 Over a year ago

This dropdown menu does not show the content, could you include that in your answer?

KyleS · Accepted Answer · 2017-06-28 15:14:44Z

0

Here is something similar to the picture you provided. background-colors used to make things distinct.

$("span").html("Page: 1");
$("#Page1").show();

$("li").on('click', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
    $("span").html("Page: " + value);
  }
});

ul{
  display: none;
  margin: 0;
  padding: 0;
  background-color: pink;
  position: absolute;
  width: 75px;
}

.page{
  display:none;
}

#drop:hover > ul{
  display: block;
}

#drop{
  background-color: lightgreen;
  width: 75px;
  text-align:center;
}

li{
  list-style: none;
  text-align: center;
}

li:hover{
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>  
  </ul>
</div>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

edited Jun 28, 2017 at 15:14

answered Jun 28, 2017 at 15:02

KyleS

4013 silver badges16 bronze badges

7 Comments

user7548188 Over a year ago

Is there a way to show the selected page at the top of the menu? For example, right now if you have page 2 selected it will still show select page at the top, instead of 2.

KyleS Over a year ago

@user7548188 Check my edit, used JQuery to update that field.

user7548188 Over a year ago

One last question, can I the menu to start out showing page 1 and the content. So not show the select page at all.

KyleS Over a year ago

@user7548188 Updated.

user7548188 Over a year ago

Kyle - I know you already answered my question but I'm trying to make 2 changes to my dropdown and js isn't my strongest point. Is there any way you could help? I'm trying to make it so that the first item (All) does not appear twice, when the dropdown is first clicked on All is at the top, and then it appears a second time in the dropdown menu. I also want the name of the page to appear at the top (hair, skin) instead of the number value. Here is my jsfiddle - jsfiddle.net/z7dg5e0n

|

JFC · Accepted Answer · 2017-06-28 15:16:52Z

0

Ok so I assume you don't like the tabs solutions so let's stick to your styles dropdown goal.

I would simply recommand you to install a jquery library that makes all the hard work for you. Il actually take your select box and make it themable. Theres many many options you can find my googling it, but i personnaly like this one.

EDIT : Here's my jsfiddle answer https://jsfiddle.net/1m05ubwc/2/

$("#drop").niceSelect().on('change', function() {
  var value = $(this).val();
  if (value) {
    $(".page").hide();
    $("#Page" + value).show();
  }
});

edited Jun 28, 2017 at 15:16

answered Jun 28, 2017 at 14:50

JFC

59612 silver badges25 bronze badges

Comments

Yordan Nikolov · Accepted Answer · 2017-06-28 19:36:20Z

0

Here it is some sample version ;]

$('.options li').on('click', function() {
  $('.selected').html( $(this).text() );
  $('.selected-inp').val( $(this).data('value') ).trigger('change');
  $('.options').removeClass('show');
});

$('.selected').on('click', function() {
  $('.options').toggleClass('show');
});

$('.selected-inp').on('change', function(ev) {
  $('.result').html('The new value is: ' + ev.target.value);
});

.dropdown {
   position: relative;
  height: 30px;
}
.selected {
  width: 100px;
  border: 1px solid #eee;
  padding: 6px 10px;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100px;
  bottom: -50px;
  left: 0;
  display: none;
  border: 1px solid #eee;
  border-top: none;
  list-style: none;
  margin: 0;
  padding:0;
}
.options.show {
  display: block;
}

.options li {
  background: #eee;
  cursor: pointer;
  padding: 3px;
}
.options li:hover {
  background: #ccc;
}
.result { margin-top: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="selected">Select value</div>
  <input class="selected-inp" type="hidden">
  <ul class="options">
    <li data-value="1">Opt 1</li>
    <li data-value="2">Opt 2</li>
  </ul>
</div>
<div class="result"></div>

edited Jun 28, 2017 at 19:36

answered Jun 28, 2017 at 14:58

Yordan Nikolov

2,67815 silver badges17 bronze badges

2 Comments

user7548188 Over a year ago

This dropdown menu does not show the content, could you include that in your answer?

Yordan Nikolov Over a year ago

Sorry, I dont get it, could you explain me more. What exactly do you need?

William Bohannan · Accepted Answer · 2023-11-27 09:22:50Z

Improved to make it handle more like a select box:

multiple drop on same page
added name, easier for form submission
added show, option to show name when selected in span
added selected, similiar to select box
using attr instead of val, now handles text options
using inline-blocks and white-space to make auto-expand

hope you find useful

/* initialize */
$(".drop").each(function() {
  var selected = $(this).find('li[selected]');
  var name = $(this).attr('name');
  var value = selected.length > 0 ? selected.attr('value') : "";
  var show = $(this).attr('show');
  
  // Update span
  if (show) {
    $(this).find("span").html(name + ": " + value);  
  }else{
    $(this).find("span").html(value);
  }
  
  // Demo
  $("#demo-name").html(name);
  $("#demo-value").html(value);
});


/* event */
$(".drop li").on('click', function() {
  var drop = $(this).closest('div');
  var name = drop.attr('name');
  var value = $(this).attr('value');
  var show = drop.attr('show');
  
  // Update span
  if (show) {
    drop.find("span").html(name + ": " + value);  
  }else{
    drop.find("span").html(value);
  }
  
  // Demo
  $("#demo-name").html(name);
  $("#demo-value").html(value);
});

/* dropdown */

.drop{
  width: 75px;
  cursor: pointer;
  display: inline-block;
}

.drop:hover > ul{
  display: block;
}

.drop li{
  list-style: none;
  text-align: center;
  text-align: left;
  padding: 1px 4px 1px 4px;
  white-space: nowrap;
}

.drop li:hover{
  background-color: #777;
  color: #fff;
}

.drop span{
  white-space: nowrap;
  text-align:center;
  border: 1px solid #eee;
  background-color: #eee;
  display: inline-block;
  padding: 3px 6px 3px 6px;
  min-height: 20px;
  vertical-align: middle; 
}

.drop span:hover{
  background-color: #333;
  color: white;
}

.drop ul{
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  min-width: 75px;
  background-color: #ccc;
  color: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Simple (name/values as integers):  
<div class="drop" name="Option" show="1">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2" selected>2</li>
    <li value="3">3</li>  
  </ul>
</div>

<br>

Simple (with no name): 
<div class="drop" name="Simple">
  <span></span>
  <ul>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>  
  </ul>
</div>

<br>

Vehicle (long name/value): 
<div class="drop" name="Vehicle" show="1">
  <span></span>
  <ul>
    <li value="Boat with really long name">Boat with really long name</li>
    <li value="Car" selected>Car</li>
    <li value="Truck">Truck</li>  
  </ul>
</div>

<br><br>
<b>Selected name</b>: <span id="demo-name"></span><br>
<b>Selected value</b>: <span id="demo-value"></span>

Collectives™ on Stack Overflow

Creating a dropdown without using a select box

5 Answers 5

1 Comment

7 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

7 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related