| admin |
08-11-2012 02:04 AM |
إضافة قائمة روابط أفقية على غرار Apple Mac Style الآن على بلوجر
السلام عليكم
بعد طلب الأخ ياسين بتعريب قائمة Stylish Apple Mac Style Drop Down Menu With Search Box Preview!
أتمنى أن أكون وفقت في ذلك
مثال للمعاينة : مدونة تجريبية
صورة للقائمة :
http://i1258.photobucket.com/albums/...leMacStyle.png
اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن ]]></b:skin>، أضف قبلها مباشرة :
كود PHP:
#imenu {
background: -moz-linear-gradient(center top , #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
color: #FFFFFF;
margin-bottom: 15px;
margin-right: 0;
overflow: visible;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
}
#halfnav {
float: left;
}
#halfnav ul, #halfnav ul li {
display: inline;
list-style: none outside none;
margin: 0;
padding: 0;
}
#halfnav ul li a {
background: -moz-linear-gradient(center top , #8A8A8A 0%, #707070 49%, #5E5E5E 51%, #777777 100%) repeat scroll 0 0 transparent;
border: 1px solid #666666;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: inline-block;
font-family: Tahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
font-size: 16px;
line-height: 20px;
margin: 5px;
padding: 5px;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.28);
}
#halfnav ul li a:hover {
background: none repeat scroll 0 0 #444444;
border: 1px solid #222222;
}
#halfnav .current-menu-item a {
border: 1px solid #000000;
}
#nav {
position: relative;
z-index: 2000;
}
#nav .parent > a, #nav .parent > a:hover {
background-image: url("../images/arrow.png");
background-position: left center;
background-repeat: no-repeat;
}
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover {
background-image: url("../images/arrow-left.png");
background-position: left center;
background-repeat: no-repeat;
}
#nav ul, #nav ul li {
display: inline;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav ul li a {
border-left: 1px solid #777777;
color: #FFFFFF;
display: inline-block;
font-family: Tahoma,'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
line-height: 36px;
margin-right: -4px;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 1px #333333;
}
#nav ul li a:hover {
background: none repeat scroll 0 0 #444444;
}
#nav .current-menu-item a {
color: #CCCCCC;
}
#nav .current-menu-item .sub-menu a {
color: #FFFFFF;
text-shadow: 1px 1px 1px #333333;
}
#nav .menu > li:first-child a:hover {
border-radius: 0 0 0 0;
}
#nav .menu .sub-menu li a:hover {
border-radius: 0 0 0 0;
}
#nav ul li {
position: relative;
}
#nav li ul {
display: none;
right: 7px;
position: absolute;
top: 27px;
}
#nav li ul a {
background: none repeat scroll 0 0 #555555;
}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
right: 0;
margin: -37px 0 11px 180px;
}
#nav ul li:hover ul {
display: inline-block;
}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul {
margin-top:9px;
margin-right:-10px;
display: none;
}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul {
display: block;
}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a {
border: 1px solid #777777;
margin: -1px 0 0 -11px;
}
#nav ul li:hover ul li a {
padding: 0 14px;
width: 150px;
}
#nav ul ul li:hover ul li a {
background-color: #888888;
padding: 0 14px;
width: 150px;
}
#nav ul ul ul li:hover ul li a {
background-color: #AAAAAA;
padding: 0 14px;
width: 150px;
}
#nav .children {
z-index: 4000;
}
#home {
border-left: 1px solid #777777;
float: right;
height: 36px;
margin-right: 4px;
margin-left: 15px;
}
#home a:hover {
opacity: 0.5;
}
#nohome {
float: right;
height: 35px;
margin-right: 5px;
margin-left: 4px;
}
.searchform {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 1px #222222 inset;
float: left;
height: 20px;
margin: 7px 20px 5px 10px;
padding: 0;
width: 160px;
}
.center .searchform {
float: none;
}
#morefoot .searchform {
float: right;
}
.searchform .s {
border: medium none;
color: #333333;
font-size: 12px;
height: 14px;
margin: 3px 15px 2px 20px;
overflow: hidden;
width: 130px;
}
#magnify {
float: right;
margin: 2px 0 0 5px;
position: absolute;
}
#magnify {
}
.searchform .s:focus {
border: medium none;
outline: 0 none;
}
.searchform .searchsubmit {
display: none;
}
.row {
margin: 0 auto;
max-width: 980px;
min-width: 727px;
width: 100%;
}
.row .row {
min-width: 0;
}
.column, .columns {
float: right;
margin-right: 4.4%;
min-height: 1px;
position: relative;
}
.column:first-child, .columns:first-child {
margin-right: 0;
}
[class*="column"] + [class*="column"]:last-child {
float: left;
}
.row .three {
width: 21.679%;
}
.row .nine {
width: 73.9%;
}
.row .ten {
width: 82.6%;
}
.row .twelve {
width: 100%;
}
الآن اذهب إلى التخطيط (عناصر الصفحة) وأضف أداة HTML/JavaScript والصق الكود التالي وعدل ما يناسبك :
كود PHP:
<div class="container">
<div class="row">
<div class="twelve columns" id="imenu">
<div id="nav" class="nine columns">
<div id="home"><a href="http://www.bloggerexp.com"><img src="http://i1258.photobucket.com/albums/ii536/bloggerexp/home.png" alt="home" /></a></div>
<ul id="nav_menu">
<li><a href="http://www.bloggerexp.com">بلوجر</a>
<ul>
<li><a href='http://www.bloggerexp.com/forumdisplay.php?f=5'>قوالب بلوجر</a></li>
<li><a href='http://www.bloggerexp.com/forumdisplay.php?f=7'>تعريب قوالب بلوجر</a></li>
<li><a href='http://www.bloggerexp.com/forumdisplay.php?f=10'>إضافات بلوجر</a></li>
<li><a href='http://www.bloggerexp.com/forumdisplay.php?f=11'>دروس بلوجر</a></li>
</ul>
</li>
<li><a href="http://www.bloggerexp.com/">معهد خبراء بلوجر</a>
<ul>
<li><a href="http://www.bloggerexp.com/forumdisplay.php?f=4">قوالب بلوجر</a></li>
<li><a href="http://www.bloggerexp.com/forumdisplay.php?f=9">الدعم الفني</a></li>
</ul>
</li>
<li><a href="http://www.bloggerexp.com">من نحن ؟</a></li>
<li><a href="http://www.bloggerexp.com/sendmessage.php">راسلنا</a></li>
</ul> </div>
<div class="three columns">
<form method="get" class="searchform" action="http://marvblues.com/">
<div id="magnify"><img src="http://i1258.photobucket.com/albums/ii536/bloggerexp/magnify.png" alt="magnify" /></div>
<div><input name="s" class="s" value="بحث" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';" type="text" /></div>
<div><input class="searchsubmit" value="" type="submit" /></div>
</form> </div>
</div>
</div>
</div>
غير مسجل لا أسامح بنقل الإضافة دون ذكر المصدر.
غير مسجل إذا أعجبتك الإضافة لا تبخل علينا بالنقر على زر أعجبني للفيسبوك أسفله.
|
