Home / Tutorial CSS / Tutorial Javascript / Cara buat auto hide sidebar menu setelah di click dan tema background sesuai dengan menu yang aktif di css dan javascript

Cara buat auto hide sidebar menu setelah di click dan tema background sesuai dengan menu yang aktif di css dan javascript

,

Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana Cara buat auto hide sidebar menu setelah di click dan tema background sesuai dengan menu yang aktif di css dan javascript.
----------------
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    *{margin:0;padding:0;} /* Global reset */
html, body{
  height:100%;
  font: 14px/1 Helvetica, Arial, sans-serif;
}

body{
  background:url(http://placehold.it/300x300&text=bodyImage) 50% / cover;
}



#aside{
  position:absolute;
  top:0; left:0;
  height: 100%;
  background:rgba(0,0,0,0.1);
}

#menu {
  position: relative;
  background: rgba(0,0,0,0.4);
}
img#logo {
  margin: 5px;
}
nav {
  overflow: hidden;
}
nav ul{
  position:relative;
}
/* forget about LI */
nav a {
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  padding: 10px 15px;
  transition: 0.3s; /* nice hover transition */
}
nav a.hover,
nav a.selected{
  color: rgba(255,255,255, 1);
}
nav a.selected{
  background: rgba(255,255,255,0.2);
}

/* PAGES AND CONTENT */
#pages,
#pages > div{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
}
#pages > div{
  display:none; /* hide all pages initially */
  color:#fff;
  text-align:center; /* just for demo */
}

  </style>

 
</head>
<body>
<div id="pages">
  <!-- name your ID same as the anchor hrefs -->
  <div style="background:rgba(100, 100, 50, 0.9);" id="images">IMAGES PAGE</div>
  <div style="background:rgba(50, 100, 50, 0.9);" id="movies">MOVIES!! YEY</div>
  <div style="background:rgba(100, 50, 50, 0.9);" id="360">360 PAGE</div>
  <div style="background:rgba(50, 50, 100, 0.9);" id="name">ABOUT PAGE</div>
  <div style="background:rgba(100, 50, 100, 0.9);" id="contact">Contact</div>
</div>
 
<div id="aside">

  <div id="menu">
      <img id="logo" src="http://placehold.it/150x50/fff&text=Logo">
      <nav>
          <ul>
            <li>
              <a href="#images">3D Images</a>
            </li>
            <li>
              <a href="#movies">3D Movies</a>
            </li>
            <li>
              <a href="#360">3D 360&deg;</a>
            </li>
            <li>
              <a href="#name">About</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>
      </nav>
  </div>

  <!-- more stuff here like thimbnails etc... -->
</div>
<script type="text/javascript">
   
var $menu  = $("#menu");
var $nav   = $("nav");
var $navUl = $nav.find("ul");
var $links = $navUl.find("a");
var nLinks = $links.length;
var linkH  = $links.outerHeight();
var interaction = false; // Was any menu interaction? (so we can hide the menu)
var menuHovered = false;
var hash = window.location.hash; // If a user comes to the page usign a hash like http://mypage.com#video
var mouseY = 0; // Needed to know the mouse position when menu is opening
var $pages = $("#pages > div"); // Get all pages;


$(document).on("mousemove", function( e ){
    mouseY = e.clientY; // Update the Y value
});

function openMenu() {
  $navUl.stop().animate({top: 0});
  $nav.stop().animate({height: linkH*nLinks}, {
    duration: 600,
    step: function( menuHeight ){
        // keeps removing and adding class during the animation time.
        // (it's an overkill but no other solution to that issue so far)
        $links.removeClass("hover").filter(function(i, e){
          var t = e.getBoundingClientRect().top;
          return mouseY > t  &&  mouseY < t+linkH;
        }).addClass("hover"); // only to the link returned by `.filter()` condition
    }
  });
}

function closeMenu() {
  if(!interaction) return; // Don't close menu if no item was clicked
  $navUl.stop().animate({top: - $navUl.find(".selected").position().top });
  $nav.stop().animate({height: linkH});
}

function setSelected() {
  $links.removeClass("selected");               // Remove from all
  $("a[href='"+hash+"']").addClass("selected"); // Add to clicked one (by var hash)
  closeMenu(); // force close menu!!
}

function openPage(){
  $( hash ).stop().fadeIn().siblings().fadeOut();
  setSelected(); // Set active state depenging on hash value
}

openPage(); // Open a page on website load (If we have hash value ofc.)

$links.on("click", function( e ){
  e.preventDefault();                   // Prevent browser action
  interaction = true;
  hash = $(this).attr("href");          // !!!!! here is where hash changes
  history.replaceState(null, '', hash); // Set HASH to address bar

  openPage();    // open page (ID) depending on hash value (it does also the selected stuff)
}).hover(function(){
   $(this).toggleClass("hover");
});

$menu.hover(openMenu, closeMenu);
  </script>
</body>
</html>
---------------
Semoga bermanfaat.
sumber : http://jsbin.com/
http://pangeran-it.blogspot.co.id/
Cara buat auto hide sidebar menu setelah di click dan tema background sesuai dengan menu yang aktif di css dan javascript Cara buat auto hide sidebar menu setelah di click dan tema background sesuai dengan menu yang aktif di css dan javascript Reviewed by Syawaluddin Amin, S.Kom on September 23, 2016 Rating: 5

You May Also Like

Tidak ada komentar:

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.