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>

Answer 1

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>

Answer 2

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>

Answer 3

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();
  }
});

Answer 4

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>

Answer 5

$('.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>