LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
*{padding:0;margin:0;   -webkit-box-sizing: content-box; }
body{
  background-color:#f0f0f0;
  font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
}
.mh_wrapper{
  width: 100%;
/*  height: 40px; 
  line-height: 40px;
*/
  position: absolute;
  top: 80px;
  left: 0px;
  font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  overflow:hidden;
}

#options {
/*  position: absolute;
  left: 202px;
  top: 0px;
  width: 900px;
*/
  list-style: none;
  padding: 0px;
  height: 40px;
  float:left;
  position:absolute;
  top:0;
  z-index:1;
}

#options li a {
  text-decoration: none;
  cursor: pointer;
  display: block;
  float: left;
  margin: 0px;
  text-indent: 0px;
  padding: 0px 10px 0px 3px;
  line-height: 40px;
  height: 40px;
  text-indent: 10px;
  letter-spacing: 1px;
  color: #ddd;
  background-color: #525252;
  border: 1px solid #333;
  border-left: none;
}

/* DO IT LIKE FLOW */
.mh_itemMain_flow {
  color: #f0f0f0;
  z-index: 10;
  border: 1px solid #222;
  background-color: #222;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  float:left;
  text-shadow: 1px 1px 1px #000;
  padding: 0 50px;
  height:40px;
  line-height:40px;
}

.mh_itemMain_flow:hover {
  color: #fff;
}

.mh_right_flow, .arrow {
  width: 40px;
  height: 40px;
  float:left;
  cursor: pointer;
  border: 1px solid #000;

}

.right, .arrow{
  background: #000 url(https://tympanus.net/Tutorials/UIElements/SlideOutMenu/css/right.png) no-repeat center center;  
}
.left{
  background: #000 url(https://tympanus.net/Tutorials/UIElements/SlideOutMenu/css/left.png) no-repeat center center;    
}

.mh_orderby_flow{
  height: 40px;
  line-height:40px;
  width: 40px;
  float:left;
  cursor: pointer;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  text-align: center;
}

.option_wrapper {
  display: inline-block;
  z-index:10;
  top:0;
  float:left;
  position:relative;
}












/* OUT-COMMENTED CODE */
/*
.mh_itemMain {
  color: #f0f0f0;
  z-index: 10;
  border: 1px solid #222;
  background-color: #222;
  cursor: pointer;
  text-align: left;
  font-weight: bold;
  text-indent: 20px;
  width: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
  text-shadow: 1px 1px 1px #000;
}

.mh_itemMain:hover {
  color: #fff;
}

.mh_right {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 160px;
  top: 0px;
  cursor: pointer;
  border: 1px solid #000;
  background: #000 url(https://tympanus.net/Tutorials/UIElements/SlideOutMenu/css/right.png) no-repeat center center;
}

.mh_orderby{
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: pointer;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  text-align: center;
}

.mh_wrapper ul {
  position: absolute;
  left: 202px;
  top: 0px;
  width: 900px;
  list-style: none;
  padding: 0px;
  height: 30px;
  z-index: 1;
}

.mh_wrapper ul li a {
  text-decoration: none;
  cursor: pointer;
  display: block;
  float: left;
  margin: 0px;
  text-indent: 0px;
  padding: 0px 10px 0px 3px;
  line-height: 40px;
  height: 40px;
  text-indent: 10px;
  letter-spacing: 1px;
  color: #ddd;
  background-color: #525252;
  text-shadow: 1px 1px 1px #000;
  border: 1px solid #333;
  border-left: none;
}

.mh_wrapper ul li a.hover {
  background: #333;
  color: #fff;
  -moz-box-shadow: 0px 0px 3px #000 inset;
  -webkit-box-shadow: 0px 0px 3px #000 inset;
  box-shadow: 0px 0px 3px #000 inset;
}*/


/* NEW SLIDER TEST */
.sort-wrapper_selected{
  color: #f0f0f0;
  z-index: 2;
  border: 1px solid #222;
  background-color: #222;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  float: left;
  text-shadow: 1px 1px 1px #000;
  padding: 0 50px;
  height: 40px;
  line-height: 40px;  
}
.sort-wrapper_options{
  padding: 0px;
  height: 40px;
  position: relative;
  z-index: 1;  
}
.sort-wrapper_options ul{
  max-height: 42px;
}
.sort-wrapper_options li{
  text-decoration: none;
  cursor: pointer;
  display: block;
  float: left;
  margin: 0px;
  text-indent: 0px;
  padding: 0px 10px 0px 3px;
  line-height: 40px;
  height: 40px;
  text-indent: 10px;
  letter-spacing: 1px;
  color: #ddd;
  background-color: #525252;
  border: 1px solid #333;
  border-left: none;
}
.sort-wrapper_options ul{
  display:none;
}
JS
//graceful degradation
var rightValue = $('#ui_element').width()-$('.option_wrapper').width();
var leftValueExpand = $('.option_wrapper').width();

var optionListWidth = 0;
$('.sort').each(function() {
    optionListWidth += $(this).outerWidth(true);
});

$('#ui_element').find('ul').css({
	'width'	:	optionListWidth,
	'left'	:	-optionListWidth
});

/*$('#ui_element').find('#options').css({
  'background':red,
  'right': "100"
});*/

/*
$('#ui_element').css({
  'width':$('ul').width()+$('.option_wrapper').width();
});*/

var $arrow = $('#ui_element').find('.mh_right_flow');
var $menu  = $('#ui_element').find('ul');
var $optionWrapper = $('.option_wrapper');

$arrow.on('click',function(){  
  var $this 	= $(this);
  //$this.stop().animate({'left':'160px'},50);
  console.log(leftValueExpand);
  if($arrow.hasClass('right'))
	  $menu.stop().animate({'left':$optionWrapper.width() },500);
  else
    $menu.stop().animate({'left':-optionListWidth},500);
  $arrow.toggleClass('right left');
});

$('li').on('click',function(){
  var $this 	= $(this);
  $('#selected_sorting_option').text($this.text());
  $menu.stop().animate({'left':-optionListWidth},500,function(){
    $arrow.toggleClass('right left');
  });
});

$('#selected_sorting_order').on('click', function(){
  var $this = $(this);
  $this.toggleClass('asc desc');
  var text = $this.text();
  $this.text(
    text == "Y" ? "X" : "Y");
});


$('.arrow').click(function(e){
  $('.sort-wrapper_options ul').animate({width: 'toggle'},200);
});
Term
Wed, 01/31/2018 - 11:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv