ਕਿਵੇਂ ਬਣਾਓ: ਪਾਰਲੀ ਨੇਵੀਗੇਸ਼ਨ

ਆਨਿਮੇਸ਼ਨ ਵਾਲਾ ਸਾਈਡਬਾਰ ਬਣਾਓ

ਪਹਿਲਾ ਪਦਦਾ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- ਕੋਈ ਵੀ ਤੱਤ ਨੂੰ ਵਰਤਕੇ ਸਾਈਡਬਾਰ ਨੇਵੀਗੇਸ਼ਨ ਖੋਲ੍ਹੋ -->
<span onclick="openNav()">open</span>
<!-- ਅਗਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਸਾਈਡਬਾਰ ਨੇਵੀਗੇਸ਼ਨ ਪੰਨੇ ਦਾ ਸਾਮਨੇ ਲਾਓ, ਤਾਂ ਸਾਰੇ ਪੰਨੇ ਇਸ div ਅੰਦਰ ਰੱਖੋ (ਅਗਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਸਾਈਡਬਾਰ ਨੇਵੀਗੇਸ਼ਨ ਪੰਨੇ ਉੱਪਰੀ ਪਾਸੇ ਰਹੇ, ਤਾਂ ਇਹ ਸੈਟਿੰਗ ਨਹੀਂ ਵਰਤੋਂ) -->
<div id="main">
  ...
</div>

ਦੂਜੀ ਪਦਦਾ - ਸੀਐੱਸਐੱਸ ਜੋੜੋ:

/* ਸਾਈਡਬਾਰ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ */
.sidenav {
  height: 100%; /* 100% ਪੂਰੀ ਉਚਾਈ */
  width: 0; /* 0 ਚੌਦਾਰੀ - ਜਿਸ ਨੂੰ JavaScript ਰਾਹੀਂ ਬਦਲਿਆ ਜਾਵੇਗਾ */
  position: fixed; /* ਸਥਾਨ ਵਿੱਚ ਰਹੋ */
  z-index: 1; /* ਉੱਪਰ ਰਹੋ */
  top: 0; /* ਉੱਪਰ ਰਹੋ */
  left: 0;
  background-color: #111; /* ਕਾਲਾ ਰੰਗ */
  overflow-x: hidden; /* ਹੈਰੀਟੇਲ ਸਕਰੋਲ ਨੂੰ ਨਾ ਵਰਤੋਂ */
  padding-top: 60px; /* ਕੰਟੈਂਟ ਨੂੰ ਉੱਪਰੀ ਪਾਸੇ 60px ਦੀ ਦੂਰੀ ਤੇ ਰੱਖੋ */
  transition: 0.5s; /* 0.5 ਸਕਿੰਟ ਦਾ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ, ਜੋ ਕਿ ਸਾਈਡਬਾਰ ਨੇਵੀਗੇਸ਼ਨ ਦੇ ਸਕਰੋਲ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ */
}
/* ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਲਿੰਕਸ The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* ਤੁਸੀਂ ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ 'ਤੇ ਮਾਉਸ ਲਗਾਉਣ 'ਤੇ, ਉਸ ਦਾ ਰੰਗ ਬਦਲੋ */
.sidenav a:hover {
  color: #f1f1f1;
}
/* ਬੰਦ ਬਟਨ ਦਾ ਸਥਾਨ ਅਤੇ ਸਟਾਈਲ (ਉੱਤਰ-ਪੱਛਮੀ ਕੋਨੇ) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* ਪੇਜ ਦੀ ਸਮੱਗਰੀ ਦੀ ਸਟਾਈਲ ਸੈੱਟ ਕਰੋ - ਅਗਰ ਤੁਸੀਂ ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਖੁੱਲ੍ਹਣ ਨਾਲ ਪੇਜ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਪੱਛਮ ਵੱਲ ਹਟਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹ ਸੈੱਟਿੰਗ ਵਰਤੋਂ ਕਰੋ */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* ਸਕਰੀਨ ਦੀ ਉਚਾਈ 450px ਤੋਂ ਘੱਟ ਦੇ ਛੋਟੇ ਸਕਰੀਨਾਂ 'ਤੇ, ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਸਟਾਈਲ ਸੰਸ਼ੋਧਿਤ ਕਰੋ (ਅੰਦਰੂਨੀ ਮਾਰਜਿਨ ਅਤੇ ਫੋਂਟ ਦਰਜੇ ਘਟਾਓ) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

ਤੀਜਾ ਪਗਲਾ - JavaScript ਜੋੜੋ:

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ, ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਸਲਾਈਡ ਇਨ ਕਰੇਗਾ, ਅਤੇ ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ 250px ਸੈੱਟ ਕਰੇਗਾ:

ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਨਾਲ ਕਵਰ ਉਦਾਹਰਣ

/* ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ 250px ਸੈੱਟ ਕਰੋ */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ 0 ਸੈੱਟ ਕਰੋ */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

亲自试一试

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ, ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਸਲਾਈਡ ਇਨ ਕਰੇਗਾ, ਅਤੇ ਪੇਜ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਪੱਛਮ ਵੱਲ ਹਟਾਵੇਗਾ (ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ ਦਾ ਮੁੱਲ ਪੇਜ ਦੀ ਸਮੱਗਰੀ ਦੇ ਪੱਛਮੀ ਬਾਹਰੀ ਮਾਰਜਿਨ ਲਈ ਵੀ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ):

ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਨਾਲ ਸਮੱਗਰੀ ਪ੍ਰੋਮੋਟ

/* ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ 250px ਸੈੱਟ ਕਰੋ, ਪੇਜ ਦੇ ਪੱਛਮੀ ਬਾਹਰੀ ਮਾਰਜਿਨ 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ 0 ਸੈੱਟ ਕਰੋ */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

亲自试一试

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਵੀ ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਨੂੰ ਸਲਾਈਡ ਇਨ ਕਰੇਗਾ, ਅਤੇ ਪੇਜ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਪੱਛਮ ਵੱਲ ਹਟਾਵੇਗਾ। ਪਰ ਇਸ ਵਾਰ, ਅਸੀਂ ਬੋਡੀ ਐਲੀਮੈਂਟ ਨੂੰ 40% ਅਨੁਪ੍ਰਵਾਹੀ ਕਾਲੇ ਪਿੱਟੇ ਰੰਗ ਸੈੱਟ ਕਰ ਦੇਣ ਨਾਲ ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਨੂੰ "ਉਭਾਰ" ਦੇਣ ਲਈ ਕਰਦੇ ਹਾਂ。

ਅਨੁਪ੍ਰਵਾਹੀ ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਨਾਲ ਸਮੱਗਰੀ ਪ੍ਰੋਮੋਟ

/* ਸਾਈਡਨੇਵੀਗੇਸ਼ਨ ਦੀ ਚੌਡਾਈ 250px ਸੈੱਟ ਕਰੋ, ਪੇਜ ਦੇ ਪੱਛਮੀ ਬਾਹਰੀ ਮਾਰਜਿਨ 250px, ਅਤੇ ਬੋਡੀ ਨੂੰ ਕਾਲੇ ਰੰਗ ਦਾ ਪਿੱਟਾ ਰੰਗ ਸੈੱਟ ਕਰੋ */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 设置侧边导航宽度为 0，页面内容左外边距为 0，body 背景色为白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

亲自试一试

在下面的例子中，侧边导航将从左侧滑入，并覆盖整个页面（宽度为 100%）：

全宽的侧边导航：

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

亲自试一试

下面的例子在打开和关闭侧边导航菜单时不带动画效果。

没有动画的 Sidenav

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

亲自试一试

下面的例子展示了如何创建右侧导航菜单：

右侧导航：

.sidenav {
  right: 0;
}

亲自试一试

下面的例子展示了如何创建一个始终显示的侧边导航菜单（固定位置）：

始终显示的侧边导航：

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 与侧边导航的宽度相同 */
}

亲自试一试

相关页面

教程：CSS 导航栏