Can a div be created to act like a dropdown?

Question

I am using jquery to populate a dropdown menu from a text file and it is working fine. But visually, I would like it to look different.

My dropdown is in a div. What I would like to do is make the div itself clickable so that when you click it, the dropdown menu options pop up. And when an option is selected, the div's label is set to the text of the selected option.

Is there someway to make the dropdown menu hidden but still functional?

Solution 1

If I understand correctly, you want this. Click here for a DEMO.

HTML

<div id="dd" class="wrapper-dropdown-2">Sign in with
  <ul class="dropdown">
    <li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
    <li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
    <li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
  </ul>
</div>

CSS

*,*:after,*:before {
    box-sizing: border-box;
}
.wrapper-dropdown-2 {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px 15px;

    /* Styles */
    background: #fff;
    border-left: 5px solid grey;
    cursor: pointer;
    outline: none;
}
.wrapper-dropdown-2:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
  /* Size & position */
    position: absolute;
    top: 60%;
    left: -45px;
    right: 0px;

    /* Styles */
    background: white;
    transition: all 0.3s ease-out;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    border-left: 5px solid;
    padding: 10px;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-2 .dropdown li:nth-child(1) a { 
    border-left-color: #00ACED;
}

.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
    border-left-color: #4183C4;
}

.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
    border-left-color: #3B5998;
}

.wrapper-dropdown-2 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
    color: grey;
    background-color: darkgrey;
}
.wrapper-dropdown-2.active:after {
    border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function DropDown(el) {
  this.dd = el;
  this.initEvents();
}
DropDown.prototype = {
  initEvents : function() {
    var obj = this;
    obj.dd.on('click', function(event){
      $(this).toggleClass('active');
      event.stopPropagation();
    }); 
  }
}
$(function() {
  var dd = new DropDown( $('#dd') );
    $(document).click(function() {
      $('.wrapper-dropdown-2').removeClass('active');
    });
});

Solution 2

Here take a look: http://jsfiddle.net/4Zw32/

Basically you can select which div is selected by searching for div with class selected and you could assign data attribute to get additional value.

Css

* { margin: 0;  padding: 0; }

.sel {
    color:white;
    width: 250px;
    min-height: 40px;
    box-sizing: border-box;
    background-color: #55E6FA;
    overflow: hidden;
}
.txt { padding: 10px; }
.selected { background-color: #31A9B9; }
.hide { display: none; }
.sel .options div:hover { background-color: #31A9B9; }

.sel .options {
    width: 250px;
    background-color: #66f7FB;
}
.sel .options div {
    transition: all 0.2s ease-out;
    padding: 10px;
}

Jquery

var sel = $('.sel'),
    txt = $('.txt'),
    options = $('.options');

sel.click(function (e) {
    e.stopPropagation();
    options.show();
});

$('body').click(function (e) {
    options.hide();
});

options.children('div').click(function (e) {
    e.stopPropagation();
    txt.text($(this).text());
    $(this).addClass('selected').siblings('div').removeClass('selected');
    options.hide();
});

Comments

[somebodyknowsme]

i will create for you this demo i hopefully be useful JsFiddle

[Lani1234]

This should work. But if I was using Objects to give my select options a JSON value, how can I get the functionality to be like a dropdown where I can do something with the selected option?

[Lani1234]

To answer my own question, I think I can assign the same object values to the li value attribute.