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?
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?
Share Improve this question asked Apr 29, 2014 at 20:30 Lani1234Lani1234 5225 gold badges12 silver badges22 bronze badges 5- Yup. Lots of ways. Unfortunately, your question is way too broad. Try looking for form input dropdown plugins in google. – Joseph Marikle Commented Apr 29, 2014 at 20:34
- are you just talking about html select element – Muhammad Umer Commented Apr 29, 2014 at 20:35
- 1 There are a million ways to do this; too broad for Stack Overflow, but a quick search will reveal lots of plugins and guides for doing it yourself. – Dave Commented Apr 29, 2014 at 20:38
-
This is a broad question. Maybe you're looking to style the
select
element to your liking and act as it normally does. Try searching for that. – Sunny Patel Commented Apr 29, 2014 at 20:38 - @Muhammad Umer Yes, an html select element – Lani1234 Commented Apr 29, 2014 at 20:40
2 Answers
Reset to default 7If 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');
});
});
Here take a look: http://jsfiddle/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();
});