msprogrammer 8 ارسال شده در آبان 98 گزارش بازنشر ارسال شده در آبان 98 سلام دوستان، من یه منو دیدم توی سایت که با asp.net نوشته شده. امکانش هست کسی کمک کنه که چطور باید این منو رو برای وردپرس پیاده سازی کنم؟ تا جایی که میدونم باید برای این منو از walker استفاده کرد اگر اشتباه نکنم. منبعی برای آموزش walker برای وردپرس دارین؟ نمیدونم میتونم آدرس سایت رو لینک کنم یا نه بنابراین اسمش رو مینویسم: سایت didital ( didital . net )منو که در حالت ویندوز داره رو میخوام. ممنونم نقل قول لینک به ارسال
mr.nosrati 25 ارسال شده در آبان 98 گزارش بازنشر ارسال شده در آبان 98 سلام. برای این کار باید از جاوا اسکریپت استفاده کنی توی سایت w3 نمونه کد داره من یه تیکه کد دارم براش قبلا از اونجا برداشتم الان که دسترسی قطعه متاسفانه!!! کد HTML <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>جستجوی هوشمند</h2> </div> <div class="modal-body"> <p>Some text in the Modal Body</p> <p>Some other text...</p> </div> </div> </div> کد CSS /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 80%; -webkit-box-shadow: 0px 0px 4px 0px #000000; box-shadow: 0px 0px 4px 0px #000000; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } @keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } /* The Close Button */ .close { color: white; margin-top: 21px; margin-left: 15px; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px; background-color: #e12f59; color: white; } .modal-body { padding: 2px 16px; } کد Javascript <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function () { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function () { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } } </script> میتونی با یکمی اصلاح و ویرایش فایل های CSS طرح دلخواه رو پیاده سازی کنی ! 1 نقل قول لینک به ارسال
mr.nosrati 25 ارسال شده در آبان 98 گزارش بازنشر ارسال شده در آبان 98 در 1 دقیقه قبل، mr.nosrati گفته است : سلام. برای این کار باید از جاوا اسکریپت استفاده کنی توی سایت w3 نمونه کد داره من یه تیکه کد دارم براش قبلا از اونجا برداشتم الان که دسترسی قطعه متاسفانه!!! کد HTML <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>جستجوی هوشمند</h2> </div> <div class="modal-body"> <p>Some text in the Modal Body</p> <p>Some other text...</p> </div> </div> </div> کد CSS /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 80%; -webkit-box-shadow: 0px 0px 4px 0px #000000; box-shadow: 0px 0px 4px 0px #000000; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } @keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } /* The Close Button */ .close { color: white; margin-top: 21px; margin-left: 15px; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px; background-color: #e12f59; color: white; } .modal-body { padding: 2px 16px; } کد Javascript <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function () { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function () { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } } </script> میتونی با یکمی اصلاح و ویرایش فایل های CSS طرح دلخواه رو پیاده سازی کنی ! بعد از این ها باید جی کوئری رو هم به صفحه لینک کنی! واست پیوست کردم فایلش رو jquery.min.js نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .