menu
attachment
  • الصفحة الرئيسية
  • فهرس الموقع
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • الابلاغ عن الروابط المعطوبة
notifications
موقع الوليد نت
  • تطوير مدونات بلوجر
  • _قوالب بلوجر
  • _اضافات بلوجر
  • _دروس بلوجر
  • _قوالب بلوجر مدفوعة
  • تطوير ووردبريس
  • _قوالب ووردبريس مجانية
  • _اضافات ووردبريس
  • الربح من الانترنت
  • سكربتات مجانية
  • خدمات عامة
  • مسابقات
    10|recentpost
  • موقع الوليد نت
  • حصريا اضافة قائمة عمودية لاقسام المدونة بلوجر بتقنية CSS
‪Walid Farouk‬‏
0

حصريا اضافة قائمة عمودية لاقسام المدونة بلوجر بتقنية CSS

الجمعة، 3 أغسطس 2018
share
  • ‏المشاركة في Facebook
  • ‏المشاركة في Twitter
  • ‏المشاركة على Pinterest
  • إرسال بالبريد الإلكتروني
  • كتابة مدونة حول هذه المشاركة
settings_overscan print announcement

حصريا اضافة قائمة عمودية لاقسام المدونة بلوجر بتقنية CSS


اولا : نبحث عن وسم
 </head>
ونضع الكود التالي فوقه
<style>
.menu, .menu-bar {
position: fixed;
top: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #f7f7f7;
z-index:10;
overflow:hidden;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li a{
display: block;
text-indent: -500em;
height: 5em;
width: 5em;
line-height: 5em;
text-align:center;
color: #72739f;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.1s ease-in-out;
}
.menu li a:before {
font-family: FontAwesome;
speak: none;
text-indent: 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
}
.menu li a.search:before {
content: "\f002";
}
.menu li a.archive:before {
content: "\f187";
}
.menu li a.pencil:before {
content: "\f040";
}
.menu li a.contact:before {
content: "\f003";
}
.menu li a.about:before {
content: "\f007";
}
.menu li a.home:before {
content: "\f039";
}
.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
background: #a41517;
color: #fff;
}
.menu-bar{
overflow:hidden;
left:5em;
z-index:5;
width:0;
height:0;
transition: all 0.1s ease-in-out;
}
.menu-bar li a{
display: block;
height: 4em;
line-height: 4em;
text-align:center;
color: #72739f;
text-decoration:none;
position: relative;
font-family:verdana;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background 0.1s ease-in-out;
}
.menu-bar li:first-child a{
height:5em;
background: #a41517;
color: #fff;
line-height:5
}
.para{
color:#033f72;
padding-left:100px;
font-size:3em;
margin-bottom:20px;
}


.open{
width:10em;
height:100%;
}



@media all and (max-width: 500px) {
.container{
margin-top:100px;
}
.menu{
height:5em;
width:100%;
}
.menu li{
display:inline-block;
float:left;
}
.menu-bar li a{
width:100%;
}
.menu-bar{
width:100%;
left:0;
height:0;
}
.open{
width:100%;
height:auto;
}
.para{
padding-left:5px;
}
}
@media screen and (max-height: 34em){
.menu li,
.menu-bar {
font-size:70%;
}
}
@media screen and (max-height: 34em) and (max-width: 500px){
.menu{
height:3.5em;
}
}


</style>
ثانيا : نضع كود التالي فوق وسم
 </body>

تحميل الكود

تحميل اخر

تحميل اخر


Share This
clear
  • الكاتب ‪Walid Farouk‬‏
    ‪Walid Farouk‬‏
    اهتم بما هو جديد في عالم الانترنت
  • آخر تحديث: أغسطس 03, 2018

add_comment ليست هناك تعليقات:

إرسال تعليق

مواقع ندعمها

  • _ايجي بوكـ
  • _كوكب المحترفين
  • _بوابة الامبراطور
  • _خالد تك Khaled Tech
  • _ميجا بلس
  • _طارق أحمد | Tarek Ahmed
  • _متحف التقنيات
  • _سطور برمجية
  • #ضع موقعك هنا
  • #ضع موقعك هنا

مشاركة مميزة

افضل موقع للربح من رفع الملفات Mega4Up 2021

المشاركات الشائعة

  • تحميل قالب سكويز النسخة المدفوعة مجانا حصريا من موقع الوليد نت
  • تحميل قالب فلامينغو - Flamingo
  • تحميل قالب ناز NazV2.1.1 المدفوع مجانا
  • اضافة هيدر يعرض معلومات المباريات لمدونات البث المباشر
  • افضل موقع للربح من رفع الملفات Mega4Up 2021

تابعنا على فيسبوك

‏موقع الوليد نت‏

المتابعون

الإشتراك في القناة

الاقسام

  • اضافات بلوجر
  • اضافات ووردبريس
  • الربح من الانترنت
  • خدمات عامة
  • دروس بلوجر
  • سكربتات مجانية
  • قوالب بلوجر
  • قوالب بلوجر مدفوعة
  • قوالب ووردبريس مجانية
  • مسابقات
  • facebook
  • youtube
  • twitter
attachment
  • الصفحة الرئيسية
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • facebook
  • youtube
  • twitter
  • pinterest

الحصول على إشعارات عبر البريد الإلكتروني

عن الموقع موقع الوليد نت

للربح من الانترنت وتطوير مدونات بلوجر وتحميل قوالب بلوجر وقوالب ووردبريس

صفحات مفيدة

  • الابلاغ عن الروابط المعطوبة
  • أداة ضغط أكواد CSS
  • أداة تحويل الاكواد
  • اداة تشفير اكواد

اقسام الموقع

اضافات بلوجر اضافات ووردبريس الربح من الانترنت خدمات عامة دروس بلوجر سكربتات مجانية قوالب بلوجر قوالب بلوجر مدفوعة قوالب ووردبريس مجانية مسابقات
clear
clear

  • facebook
  • youtube
  • twitter
موقع الوليد نت