اضافة قائمة أفقية احترافية جديدة الى البلوجر 2015

السلام عليكم ، مرحبا بكم في هذا الدرس الحصري و الذي سأقدم لكم فيه قائمة افقية إحترافية و جديدة لمدونات البلوجر .هذه القائمة غاية في الروعة بحيث تعمل عن طريق الضغط على القائمة فيتم ظهور القوائمو الخاصة بي المدونة و في حالة ما انتهى من البحث يمكن للزائر اخفائ هذه القائمة بالضغط فقط على عز الزر إخفاء ، كما قلت سابقا قائمة احترافية و متناسقة الألوان و أيضا المظهر و الشكل و سريعة العمل و الإضافة ، تابع الشرح التالي ...

معاينة الإضافة

طريقة اضافة القائمة الى البلوجر

1 . نتوجه الى المدونة ، قالب ، تحرير HTML

2. نبحث عن الوسم

</head>

3. ثم نضيف الكود التالي فوقه

<style>
* {
-webkit-transition-timing-function: ease-out;
/* Safari and Chrome */
transition-timing-function: ease-out;
box-sizing: border-box;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
}

.toggleNav {
border-bottom: 5px solid #15e1af;
background-color: #54EFC9;
width: 100%;
height: 80px;
text-align: center;
line-height: 80px;
cursor: pointer;
color: white;
font-size: 30px;
text-decoration: none;
}
.toggleNav:hover { border-bottom: 5px solid #13ca9d; }
nav {
width: 100%;
min-height: 50px;
}
.toggleNavButton {
transition-duration: 0.5s;
width: 40px;
height: 2px;
background-color: white;
position: absolute;
right: 50%;
top: 25px;
margin-right: -20px;
border-radius: 2px;
}
.toggleNavButton:before,
.toggleNavButton:after {
border-radius: 2px;
transition-duration: 0.5s;
content: "";
position: absolute;
top: 10px;
right: 0;
background-color: white;
width: 40px;
height: 2px;
}
.toggleNavButton:after { top: 20px; }
.toggleNavButton.active { width: 0; }
.toggleNavButton.active:after {
top: 10px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.toggleNavButton.active:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#subnav {
width: 100%;
border-bottom: 0px solid #e60b3e;
background-color: #F64870;
transition-duration: 0.2s;
overflow: hidden;
height: 0px;
}
#subnav.active {
border-bottom: 5px solid #e60b3e;
height: 50px;
}
#subnav ul {
width: 615px;
margin: 0 auto;
}
#subnav ul li {
transition-duration: 0.3s;
display: inline-block;
text-align: center;
width: 120px;
padding: 10px 0;
height: 50px;
}
#subnav ul li a { color: white;text-decoration: none; font: 13px oswald,ges;}
#subnav ul li:hover { background-color: #e60b3e; }
</style>

4. نبحث عن الكود

</body>

5. ثم نضيف الكود التالي فوقه مباشرة

<script>
$(".toggleNav").click(function () {
$("#subnav").toggleClass("active");
$(".toggleNavButton").toggleClass("active");
});
</script>

6. و اخيرا كود الخاص بالقائمة أضفه في المكان الذي تريده و يستحسن اضافته أسفل الوسم <body>

<nav>
<div class="toggleNav">
<div class="toggleNavButton"></div>
</div>
<div id="subnav">
<ul>
<li> <a href="#">الرئيسية</a> </li>
<li> <a href="#">القائمة 1</a> </li>
<li> <a href="#">القائمة 2</a> </li>
<li> <a href="#">القائمة 3</a> </li>
<li> <a href="#">القائمة 4</a> </li>
<li> <a href="#">القائمة 1</a> </li>
<li> <a href="#">القائمة 1</a> </li>
</ul>
</div>
</nav>

7. ثم حفظ . لأي استفسار ضعه في التعليق .

اضافة قائمة أفقية احترافية جديدة الى البلوجر 2015

مقالات ذات صلة

3 التعليقات