LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  overflow-x: hidden;
}
.menu-container a {
  z-index: 2;
  display: inline;
  font-size: 28pt;
  position: fixed;
  text-decoration: none;
  color: rgba(122, 177, 255, 0.4);
  background-color: rgba(214, 214, 214, 0.35);
}
.menu-container a:hover {
  color: gray;
  background-color: rgba(214, 214, 214, 0.651);
}
.menu-container ul {
  display: flex;
  overflow: auto;
  align-items: center;
  justify-content: center;
}
.menu-container ul.menus {
  list-style: none;
}
.menu-container ul.menus li {
  padding: .5em;
  max-width: 2.3em;
  min-width: 2.3em;
  background-color: brown;
}
.menu-container ul.menus li:hover {
  color: red;
  cursor: pointer;
  background-color: red;
}
.menu-container ul.menus li i {
  color: white;
  display: flex;
  font-size: 30pt;
}
.menu-container ul.menus li i:hover {
  color: lightgray;
}
::-webkit-scrollbar {
  display: none;
}
JS
$(() => {
  const $next = $("#next"),      
        $prev = $("#prev"),
        $window = $(window),
        $menu = $("#menu .menus"),
        $li =  $("li:first-child", $menu);
  
  const scrollWidth = $li.width() + 50;
  const animDuration = 600;
  
  let winWidth = $window.width();
  
  
  function scroll(direction) {
    const leftWidth = (scrollWidth * direction);
    $menu.animate( { scrollLeft: `+=${leftWidth}` }, animDuration);
  }
  
  function scrollToBeginningLeft() {
    scroll(-3);
  }
  
  function setHandlersPosition() {  
    const top = .43;
    $next.css("left", `${(winWidth - 21)}px`);
    $next.css("height", `${$menu.height()}px`);  

    $prev.css("top", `${top}em`);    
    $prev.css("height", `${$menu.height()}px`); 
    
    $next.css("top", `${top}em`);
  }
  
  scrollToBeginningLeft();  
  setHandlersPosition();
  
  $window.on("resize", () => {
    winWidth = $window.width();
    setHandlersPosition();
    scrollToBeginningLeft(); 
  });
  
  $prev.on("click", (evt) => {
    evt.preventDefault();
    scroll(-1);
  });
  
  $next.on("click", (evt) => {
    evt.preventDefault();
    scroll(1);
  });
  
  $menu.on("swipe", (evt, direction) => {
    evt.preventDefault();
    console.log(evt, direction);
  });

});
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv