كود زر منبثق لعمل قائمة وأخفائها |
السلام عليكم
اليم تم بحمد الله تعالى انتهاء من كود
منبثق لعمل قائمة وبها ازرار مهمة بالروابط
ونعرض عليكم صورة للكود وطريقة عملة
اليكم صورة
والان مع الكود الاول
يوضع باى مكان يقبلHTML
الكود:
<span class="clr"></span>
</div> <nav class="menu-popup">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a class="menu-item" href="/viewonline">المتواجدون الآن</a>
<a class="menu-item" href="/search?search_id=activetopics">مشاركات اليوم</a>
<a class="menu-item" href="/c8-category">القسم الأدبى</a>
<a class="menu-item" href="/c9-category">تقنية المعلومات</a>
<a class="menu-item" href="/f14-montada">إشعارات الأدارة</a>
<a class="menu-item" href="/c1-category">الأقسام العامة</a>
<a class="menu-item" href="/forum">الصفحة الرئيسية</a>
</nav>والكود الثانىيوضع فى
لوحة الادارة - مظهر المنتدى - الصور والالوان - الوان - ورقة تصميم css
الكود:
.menu-open {
display: none;
}
.menu-item {
position:fixed; bottom:35px; left:135px;
z-index: 999;
text-align:center;
height:60px;
font-size:36px;
color: #365998;
min-width:350px;
line-height:55px;
border-radius:2px;
border-left: 50px solid #365998;
background-color: rgb(231, 231, 231);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
transition:all .4s ease-in-out 0s;
visibility: hidden;
opacity: 0;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
transition: transform 200ms;
}
.hamburger-1 {
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu-popup {
position:fixed; bottom:-20px; left:150px;
}
.menu-open-button {
z-index: 999;
background: #369FCF;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 100%;
width: 30px;
height: 30px;
left: 35px;
position: fixed;
bottom: 35px;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
opacity: 1;
visibility: visible;
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transform: translate3d(0, -50px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transform: translate3d(0, -130px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transform: translate3d(0, -210px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transform: translate3d(0, -290px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
transform: translate3d(0, -370px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
transform: translate3d(0, -450px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
transform: translate3d(0, -530px, 0);
}يمكن ايضاً استخدام الكود بالكامل على هذا النحو
الكود:
<span class="clr"></span>
</div> <nav class="menu-popup">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a class="menu-item" href="/viewonline">المتواجدون الآن</a>
<a class="menu-item" href="/search?search_id=activetopics">مشاركات اليوم</a>
<a class="menu-item" href="/c8-category">القسم الأدبى</a>
<a class="menu-item" href="/c9-category">تقنية المعلومات</a>
<a class="menu-item" href="/f14-montada">إشعارات الأدارة</a>
<a class="menu-item" href="/c1-category">الأقسام العامة</a>
<a class="menu-item" href="/forum">الصفحة الرئيسية</a>
</nav> <style>
.menu-open {
display: none;
}
.menu-item {
position:fixed; bottom:35px; left:135px;
z-index: 999;
text-align:center;
height:60px;
font-size:36px;
color: #365998;
min-width:350px;
line-height:55px;
border-radius:2px;
border-left: 50px solid #365998;
background-color: rgb(231, 231, 231);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
transition:all .4s ease-in-out 0s;
visibility: hidden;
opacity: 0;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
transition: transform 200ms;
}
.hamburger-1 {
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu-popup {
position:fixed; bottom:-20px; left:150px;
}
.menu-open-button {
z-index: 999;
background: #369FCF;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 100%;
width: 30px;
height: 30px;
left: 35px;
position: fixed;
bottom: 35px;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
opacity: 1;
visibility: visible;
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transform: translate3d(0, -50px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transform: translate3d(0, -130px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transform: translate3d(0, -210px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transform: translate3d(0, -290px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
transform: translate3d(0, -370px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
transform: translate3d(0, -450px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
transform: translate3d(0, -530px, 0);
}
</style>والان مبروك عليكم
رجاء لا تضيع مجهودنا وتعبنا بنقل الموضوع دون ذكر المصدر وشكرا |
