اضافة قائمة افقية منسدلة بتقنية css3 لمدونات بلوجر
مقدمة عن الاضافة :
بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة والسلام
اليوم مع موضوع جديد ربما يشغل بال كل مدون وهو اضافة قائمة افقية اعلى المدونة بشكل جميل ومظهر احترافى .فهى لا تحتوى فقط على اقسام المدونة او التسميات بل تحتوى ايضا على صندوق بحث صغير وايضا قوائم منسدلة بتفنية او "لغة " css3 ، شاهد المثال التالى لتتعرف اكثر عن الاضافة
تركيب الاضافة
اولا : نتوجه الى >> القالب ثم >> تحرير html
ثم نضغط ctrl+f ونبحث عن :
]]></b:skin>ونضع قبله (فوقه) الكود التالى :
#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: right;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: right;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
font-family: goth;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
@font-face {
font-family: 'goth';
src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: #039B48;
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: left;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJO-4fREBGpTniy3tXfHlLpldrD8lvfrw4i-QqEmcZ96zAsGxLkZL5-UiCzVbyP0RmckRkYKNbe4Q3EqRyoCdCKQzm6wabB5Am0-zMHrzMCZYqNaiAS6sL-cvD-yRDzqnuRjMTtXk1yV8/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;
}
تخصيص الكود :
1- ما باللون الاحمر يمثل عرض الاضافة ، يمكنك التعديل عليه ان كنت تريد تصغير او تكبير عرض الاضافة
2- اللون الازرق هو نوع الخط للكلمات الموجودة فى القائمة (الاقسام)
ثانيا : نبحث عن :
</header>ونضع قبله (فوقه) الكود التالى :
<div id='contact-links'>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>الرئيسية</a></li>
<li><a href='#'>منسدلة</a>
<ul>
<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='#'>عنصر القائمة 5</a></li>
</ul>
</li>
<li><a href='#'>منسدلة</a>
<ul>
<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='#'>عنصر القائمة 5</a></li>
</ul>
</li>
<li><a href='#'>منسدلة</a>
<ul>
<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='#'>عنصر القائمة 5</a></li>
</ul>
</li>
<li><a href='#'>قائمة واحدة</a></li>
<li><a href='#'>قائمة واحدة</a></li>
<li><a href='#'>منسدلة</a>
<ul>
<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='#'>عنصر القائمة 5</a></li>
</ul>
</li>
</ul>
</nav>
<!-- menu-search form -->
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
تخصيص الكود
هذا كود html يمثل اقسام المدونة ، يمكنك استبدال كلا من :
- عنصر القائمة
- منسدلة
- قائمة واحدة
- رمز # برابط القسم المراد عرضه
بما يناسب اقسام مدونتك
وفى الاخير اتمنى ان يعجبك الموضوع ، والسلام عليكم ورحمة الله
تعليقات
إرسال تعليق