WM Slider Sidenav, Fixed Css & Etc Code

নিচের কোড গুলো দিয়ে আপনি Side Navigation menu Slider এবং position Fixed এবং আরো অন্যান্য কোড এর কাজ করতে পারবেন।

১. প্রথমে Slider Sidenav এর কোড জেনে নিই।
Slider Sidenav তৈরি করার জন্য লাগবে Button, css, forum & javascript Code,, মোট ৪ টা। তো চলুন শুরু করি।

এই কোডটিতে Sidenav Left থেকে right জাবে

★ Button Code ↓↓↓

<br /> <span onclick="openNav()">এখানে লিখা অথবা ছবি দিন</span>
★ css Code ↓↓↓

<br /> <style> .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 6px; transition: 0.5s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 18px; margin-left: 50px; } #main { transition: margin-left .5s; padding: 20px; } .cc { color: #000; padding: 15px; font-size: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style>
★ Forum Code ↓↓↓

<br /> <div id="mySidenav" class="sidenav"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><font color="white"><br /> <t>Close</t></font></a><div class="c">এখানে লিখা অথবা যেকোনো কিছু দিন</div></div>
★ Javascript Code ↓↓↓

<br /> <script> function openNav() { document.getElementById("mySidenav").style.width = "200px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script>
Sidenav Left থেকে right এর কাজ সেস

---

পরবর্তী ↓↓↓

এই কোডটিতে Sidenav Right থেকে left জাবে

★ Button Code ↓↓↓

<br /> <span onclick="openrightNav()"><br /> এখানে লিখা অথবা ছবি দিন<br /> </span>
★ css Code ↓↓↓

<br /> <style> .sidenav1 { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; padding-top: 6px; transition: 0.5s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn1 { position: absolute; top: 0; left: 25px; font-size: 18px; margin-right: 50px; } #main { transition: margin-right .5s; padding: 20px; } .cc1 { color: #000; padding-left: 15px; font-size: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style>
★ Forum Code ↓↓↓

<br /> <div id="mySidenav1" class="sidenav1"><a href="javascript:void(0)" class="closebtn1" onclick="closerightNav()"><font color="white"><br /> <t>Close</t></font></a><div class="cc1">এখানে ইচ্ছা মত কোড দিন</div></div>
★ Javascript Code ↓↓↓

<br /> <script> function openrightNav() { document.getElementById("mySidenav1").style.width = "200px"; } function closerightNav() { document.getElementById("mySidenav1").style.width = "0"; } </script>
Sidenav Right থেকে Left এর কাজ সেস

---

২. এখন Position Fixed Css এর কাজ করবো

Position Fixed তৈরি করার জন্য সুদু মাত্র Css এবং Show code দরকার।

তো চলুন সুরু করি

★ Show Code ↓↓↓

<br /> <div align="right"><div class="fixed"><div class="ppp"><a href="/wp-login.php"><t>Login</t></a><a href="/signup"><d>Sign Up</d></a</div><br /> </div></div>
★ Css Code ↓↓↓

নিচের Css কোড দ্বারা আপনি পজিসন top এর Left, Right, Center এবং Bottom এর Left, Right, Center করতে পারবেন। পজিসন চেন্জ করতে Show কোড এর Div Class Css এর নাম অনুযায়ী চেন্জ করুন

<br /> <style> div.fixed1{position:fixed;top:0;left:0;width:100%;border:0px solid #73AD21;} div.fixed2{position:fixed;top:0;right:0;width:100%;border:0px solid #73AD21;} div.fixed3{position:fixed;top:0;center:0;width:100%;border:0px solid #73AD21;} div.fixed4{position:fixed;bottom:0;left:0;width:100%;border:0px solid #73AD21;} div.fixed5{position:fixed;bottom:0;right:0;width:100%;border:0px solid #73AD21;} div.fixed6{position:fixed;bottom:0;center:0;width:100%;border:0px solid #73AD21;} </style>
Fixed Position এর কাজ শেষ

Note:- Remove All br tag

---

আজ এই পর্যন্তই।
ধন্যবাদ।
খোদা হাফেজ।