হ্যালো ট্রিকবিডির বন্ধুরা, আপনারা কেমন আছেন, আমি খুব ভালো আছি। আমরা অনেকেই বিভিন্ন সাইট ভিজিট করার সময় প্রায় দেখি কিছু কিছু ওয়েবসাইটে দেখি নেভিগেশন বাটন। সেখানে ক্লিক করলে একট চার্ট আসে এবং সেখানে দেখা যায় সাইটের বিভিন্ন অপসন যেমন: লগিন, সাইনআপ ও সাইটের সম্পর্কে আরো অনেক কিছু । আপনারা যারা আপনাদের সাইটে এই রকম সিস্টেম করতে চান তারা খুব দ্রুত নিচের কোড টুকু কালেক্ট করুন। এবং আপনার সাইট কে আরো সুন্দর করুন।

এই কোড ট্রিকবিডি থেকেই কপি করা যাবে এবং ১০০% কার্যকরি।

<!DOCTYPE html>

<html>

<style>

body {

font-family: “Lato”, sans-serif;

}

 

.sidenav {

height: 100%;

width: 0;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

transition: 0.5s;

padding-top: 60px;

}

 

.sidenav a {

padding: 8px 8px 8px 32px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

transition: 0.3s

}

 

.sidenav a:hover, .offcanvas a:focus{

color: #f1f1f1;

}

 

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;

}

 

@media screen and (max-height: 450px){

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

</style>

<body>

 

<div id=”mySidenav” class=”sidenav”>

<a href=”javascript:void(0)”

class=”closebtn”

onclick=”closeNav()”>&times;</a>

 

<a href=”#”>About</a>

<a href=”#”>Services</a>

<a href=”#”>Career</a>

<a href=”#”>Contact</a>

 

</div>

 

<h2>Sidenav Example</h2>

<p>Click on the element below to open

the side navigation menu.</p>

 

<span style=”font-size:30px;cursor:

pointer”onclick=”openNav()”>☰ open

</span>

 

<script>

 

/* Set the width of the side navigation to

250px */

 

function openNav() {

document.getElementById(“mySidenav”)

.style.width=”250px”;

}

 

function closeNav() {

document.getElementById(“mySidenav”)

.style.width = “0”;

}

</script>

 

</body>

</html>

কোডের কিছু আউটআপুট দেখুন ।


যারা ওয়বসাইট নিয়ে কাজ করেন তাদের এই কোডটি খুব কাজে আসবে। এবং ওয়েবডেভলপার রা কোডটি নিজের মতো কাষ্টমাইজ করতে পারেন।
কোডটি ওয়াপকাতে কাজ করবে না। কারন‌ ওয়াপকাতে onclick=”function()” Mathod কাজই করে না। আপনারা হোষ্টিং থেকে তৈরি সাইট অথবা ওয়াপকিজ, Xtgem এ কাজ করতে পারেন। আর আগামিতে আমার সাহটের মতো User Friendly ডিজাইনের সাইট তৈরি করা টিউটোরিয়াল দিব। এই প্রজন্ত সবাই ভালো থাকুন। আমার সাইট

20 thoughts on "আপনার ওয়েবসাইটের জন্য নিয়ে নিন নেভিগেশন কোড এবং নেভিগেশন সিস্টেম করুন"

  1. Ashraful Sarkar Ashraful Sarkar Contributor says:
    nice post


    1. SOYEB Soyeb Khan Author Post Creator says:
      Thanks
  2. Shadin Shadin Subscriber says:
    দরকারী পোস্ট।
    ধন্যবাদ।
    1. SOYEB Soyeb Khan Author Post Creator says:
      Thanks too.
    1. SOYEB Soyeb Khan Author Post Creator says:
      Wlc
  3. Mr. X mr. X Contributor says:
    আপনার fb আইডি লিংকটা দিন।
    1. SOYEB Soyeb Khan Author Post Creator says:
      fb.com/estiaksoyeb
  4. Sozib Alahi Contributor says:
    Dorkari post eta ami onek din khujechi ei post ta tnx
    1. SOYEB Soyeb Khan Author Post Creator says:
      Welcome
  5. Mahfuz Inam Mastar Author says:
    Site a bosabo kemne?


    1. SOYEB Soyeb Khan Author Post Creator says:
      apnar site kon platform e..
      wp hole header.php file bosaben..
    2. Mahfuz Inam Mastar Author says:
      WordPress a but kivabe header.php te bosabo ba header.php koi ase aktu bolbe plz ? Ami new
    3. SOYEB Soyeb Khan Author Post Creator says:
      Opps. আসলে ভাইয়া এটা তো ওয়েব ডিজাইনার দের জন্য। আমি সুপারিশ করছি আপনি আগে ওয়েব ডিজাইন শিখুন।
    4. SOYEB Soyeb Khan Author Post Creator says:
      Apni Theme Editor Plugin install kore header.Php file khuje paben & edit korte parben
  6. SH∀NʇO SH∀NʇO Contributor says:
    vai code copy korlam but kaj hosche na please help.me
    1. SOYEB Soyeb Khan Author Post Creator says:
      দয়া করে বলবেন কি? কিভাবে/কোথায় ট্রাই করেছেন।
  7. স্বপ্ন স্বপ্ন Author says:
    Apnar ki wapkiz diye banano siteta
    1. SOYEB Soyeb Khan Author Post Creator says:
      na vai. eta xtgem diye

Leave a Reply