CSS with jquery landscaping select_jquery

A simple CSS matching JQ landscaping Select

Copy Code code as follows:

<div id= "Main" >
<section id= "Basic-usage" >
<select id= "Basic-usage-demo" >
<option value= "" > Please select ...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</section>
</div>

Copy Code code as follows:

<script>
$ (document). Ready (function () {
$ (' #basic-usage-demo '). Fancyselect ();

Boilerplate
var reponame = ' Fancyselect '

$.get (' + reponame, function (repo) {
var el = $ (' #top '). Find ('. Repo ');

El.find ('. Stars '). Text (Repo.watchers_count);
El.find ('. Forks '). Text (Repo.forks_count);
});

var menu = $ (' #top '). Find (' menu ');

function Positionmenuarrow () {
var current = Menu.find ('. Current ');

Menu.find ('. Arrow '). css (' left ', Current.offset (). Left + (Current.outerwidth ()/2));
}

$ (window). On (' Resize ', positionmenuarrow);

Menu.on (' Click ', ' a ', function (e) {
var el = $ (this),
href = el.attr (' href '),
Currentsection = $ (' #main '). Find ('. Current ');

E.preventdefault ();

Menu.find ('. Current '). Removeclass (' current ');

El.addclass (' current ');

Positionmenuarrow ();

if (currentsection.length) {
Currentsection.fadeout. Promise (). Done (function () {
$ (HREF). addclass (' current '). FadeIn (300);
});
} else {
$ (HREF). addclass (' current '). FadeIn (300);
}
});

Menu.find (' A:first '). Trigger (' click ')
});
</script>

Copy Code code as follows:

<style type= "Text/css" >

Div#main {font-size:16px; line-height:26px; color: #fff;}
Div#main div.fancy-select {margin:0 auto 60px; width:200px;}

</style>