مجموعة كبيرة من اشرطة القوائم للمدونات باستايلات جديدة وكثيرة
4:27:00 م
0 التعليقات
بلوجر
السلام عليكم ورحمة الله وبركاته
طريقة الاضافة
- اذهب الى لوحة التحكم في مدونتك
- القالب
- تحرير html
- ثم ابحث عن الرمز ]]></b:skin>
بعد ان تجد الرمز المطلوب اضف الكود التالي فوق الرمز ]]></b:skin> مباشر
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;
float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWK8LU9aKSryiCWNzwEINNsQJPyiqxGkUT7gECf-CknYfe4qB4_b6QEHS57GNDZg6NqdXdh6nfoqksKaWOG89nSgVqCG6MHKzbB18dH79C3y6zo5dv14nSt1-bfJSpbrc4kRgsKlB53Cz/s1600/topnav_bg-namkna-ngoctra.png) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLbodigs4NyhmPnDIq__wFh5YMggip-_eLB9QYrUpdPvinE-6nFc9yqNL_HXej5UBNYntGRyvv-gjk7r2SAYPthEq_jpY9sYAzzmQyP3yrG7V3dNkE25zKO_uHDcavTv1xQv33YcJPeHse/s1600/topnav_hover-namkna-ngoctra.png) no-repeat center top;
z-index:100}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmrjArjzdwmkjJEljz5p3vtyc78FIKwrqi7gsOZ4wEvLyrWqpDF1ttl6qmhlRGe94bshbwC2J5Y2382SIYs6ABgUa1HVB3dpY_8-lfOHuuCyhrG8gnYNdjiM-3MDTdHBaGnnzPqo5tcGpR/s1600/subnav_btn-namkna-blogspot-ngoctra.png) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5e_Vtgs8TUXLL2qarMn1WrbJaHcpgurxoZc79aW-riM1AoMnc3GO3rOlDee6ALofYxI1TVlufVAbM9xokkIm4QqcgywtbUiaKyVCGQR9Zqo6GLVNreDYGSmr-tAu4d1YTpIz6bQ9Rm9K/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5e_Vtgs8TUXLL2qarMn1WrbJaHcpgurxoZc79aW-riM1AoMnc3GO3rOlDee6ALofYxI1TVlufVAbM9xokkIm4QqcgywtbUiaKyVCGQR9Zqo6GLVNreDYGSmr-tAu4d1YTpIz6bQ9Rm9K/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
5. ابحث عن الرمز </head> ثم اضف الكود التالي فوقه مباشر
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
6. الان اذهب الى التخطيط اضافة ادوات اضف اداة HTML / Javarscip ثم الصق الكود التالي حيث تريد ظهوره مع التعديل عليه بإضافة روابط واسماء الصفحات المطلوبة
<ul class='topnav'> <li><a href='/'>Home</a></li> <li> <a href='#'>Menu 1</a> <ul class='subnav'> <li><a href='#'>Menu con 1.1</a></li> <li><a href='#'>Menu con 1.2</a></li> <li><a href='#'>Menu con 1.3</a></li> <li><a href='#'>Menu con 1.4</a></li> <li><a href='#'>Menu con 1.5</a></li> </ul> </li> <li> <a href='#'>Menu 2</a> <ul class='subnav'> <li><a href='#'>Menu con 2.1</a></li> <li><a href='#'>Menu con 2.2</a></li> <li><a href='#'>Menu con 2.3</a></li> <li><a href='#'>Menu con 2.4</a></li> <li><a href='#'>Menu con 2.5</a></li> <li><a href='#'>Menu con 2.6</a></li> </ul> </li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> <li><a href='#'>Menu 6</a></li> </ul>
الستايل الثاني
طريقة الاضافة كما هو موضوع بالاعلى فقط سوف اضع التسميات
طريقة الاضافة
- اذهب الى لوحة التحكم في مدونتك
- القالب
- تحرير html
- ثم ابحث عن الرمز ]]></b:skin>
#drop {
margin: 0;
padding: 15px;
z-index:100;
position:relative;
}
#dropmenu_namkna li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#dropmenu_namkna li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#dropmenu_namkna li a:hover {
background: #C8C8C8;
}
#dropmenu_namkna li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
z-index:30;
}
#dropmenu_namkna li ul li {
float: none;
display: inline;
}
#dropmenu_namkna li ul li a {
width: auto;
background: #CAE8FA;
}
#dropmenu_namkna li ul li a:hover {
background: #A3CEE5;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function dropmenu_namkna_open()
{ dropmenu_namkna_canceltimer();
dropmenu_namkna_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function dropmenu_namkna_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function dropmenu_namkna_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function dropmenu_namkna_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#dropmenu_namkna > li').bind('mouseover', dropmenu_namkna_open)
$('#dropmenu_namkna > li').bind('mouseout', dropmenu_namkna_timer)});
document.onclick = dropmenu_namkna_close;
//]]>
</script>
6. الان اذهب الى التخطيط اضافة ادوات اضف اداة HTML / Javarscip ثم الصق الكود التالي حيث تريد ظهوره مع التعديل عليه بإضافة روابط واسماء الصفحات المطلوبة
<ul id="dropmenu_namkna"> <li><a href="/">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#"> tên menu 1.1</a></li> <li><a href="#"> tên menu 1.2</a></li> <li><a href="#"> tên menu 1.3</a></li> </ul> </li> <li><a href="#"> tên menu 2</a> <ul> <li><a href="#"> tên menu 2.1</a></li> <li><a href="#"> tên menu 2.2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#"> tên menu 3.1</a></li> <li><a href="#"> tên menu 3.2</a></li> <li><a href="#"> tên menu 3.3</a></li> <li><a href="#"> tên menu 3.4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </li> </ul>_________________________________________________________________
الان الاشرطة الاخرئ اختر الشريط الذي تحتاجه
ثم اذهب الى لوحة التحكم في مدونتك تخطيط
اضافة اداوات ثم اضف اداة HTML / Javarscip واضف الكود الذي يعجبك في كل من الستايلات التالية
ولا تنسى التعديل عليها ازالة رمز # واضافة رابط الصفحات المقصودة مع التعديل على Link 1 في كل منها
استايل 1
<style>
#navcontainer { /* none needed */ }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #fff; background-color: #FE9C54; }
</style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>
استايل 2
<style>
#navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #666; background-color: #fff; }
</style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>
استايل 3
<style> #tabs { font: bold 7.5pt Verdana; }
#navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul
#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul
#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; }
#navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; }
#navlist a:hover { color: #fff; border: 4px solid #fff; }
</style>
<div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>
استايل 4
<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img
{ border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 5
استايل 6<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3P8wxIUUqopYg0hzF_BM-F5Lp8GlonVDLLip-StD_zeTJ7cBSJGvqAsJGVEwt9kRUHH2f-fVwvYZySci9wrEWdPf51EL2Ma38O3W8faJdgVAAPEoU30XNkHbY_F-TuOwn0BxjP3VDwqI/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 7<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj644G6Obu4eV-L3SN1uxDE41ikwdh5jb6XiA4MgwlgC1QPcyzeFyB8sh39kSuY_qZUGyZABGJ8UVrk9DHyimJ0Fcq2Ib7i-yQw98Si3mNEKpjGdNmb63EKCddFUIt77ca8PYRKYZievQ8/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0rvlIl_X8Dcpx7cWhWmHlsxLLKUTDm0HJ6QAcQaYR8F499XbpboRVKRAI-0o2xMDRfg7hzjkQS5gNM81o1wy6aNYl9A4M6zcvfvegM44STL5xPM3MnKrBxP8bGxSjbemgHmbP3k5s5c/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 8<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHVoGgjo1nGZIrJSCZHR_wg4-BGToWgOL13UI2eR3HLNODrbYouL7p7L9eykZ3CH0JA004sDQeuUFQdH1v_4awKHoN3tm_jh8zUJ_cYfnVKQPJjPTasoeMvGtiOYBniRV6c23WXomlko/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHF9B9xI5Md_C6vlcLnPgBV9HOA0y1kwn9zISh1-N32ObOERqoEP_waiCNAo16veHsr6wXgPHuNpXF5TinHG3xOZim-7r2nNZ7nK_Ng9PU0LE1tLKdeQtso-TaiKc1mLs5INVEm67C7FI/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 9<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqF79E10hhsmn8LLNmaNxszVGquLMa5fSEd0LP2iDYjHUHhm2mQeF8eMBZDu592iWrtlDpYXdmQv8eV2JPfUqsg37AID6PNh2u2BB5XcGQXbgRb2qiv6GKMSebfxYDXDN-XzW0-YfV188/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgccWFZQjFTBV2gyWvp4iu3p0mbklP0iMUwwJcElItOUH2FJ90JseOYG-O29C03mHxpHTDN5jGh-qKXpvucxOVCFJrI7LHtrpA9fGCtrsn73JG9mQoY7vULD1BA_iUZizV5bbHZhWYSWls/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 10<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 11<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDFm5blhveQFysF3KkqwoNcY_qEKxvmwrMF2X96iUzJVbGOolIhWWEl0KSxIeUTbC6I0hU7JmCP-_uSsH9VXOd8q_qm2b125apZ-T2oL_647542gQicsJRc3FCyGKGBrbbN_d1GxQgsY/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZAT0d5u6cakQwLu00VMTuTSIaNKufy_yjQS8zYmLVDlIsh_UK52XBRs_8gK99Oz0GLalw3pzcqo-7bjG1_k98Mbl2UxMaDHQxY-yo723Ao2vJw_51idevHQPQw5ZigK1p3sAL9C2tgg/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 12<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamv4DQzKsu3t75JUwkcGAqtRlUDqul_Q9Cy7dzclxjcVmLUYaKRetMIUDb8uQneWQVCuOZ-EvaL627yKJta1yrNs5S5OScj5dT8a6S09kPGptjTB4Q9FC6NuCUG6-ha-EhP_aTlHWOqs/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNg8DPyJ7QRRYvo_jsV3RN0DLGGsaMg_1ipuwpnniMlswAFxtp15JO91RC0ri7SX2t6TxS6-nwjNuRgXoqN0OCS_d3hhhKJMYQkgcOWrJM_Phyuwcs2K1hHDXIv5K_NpO3_JwpcYjsT00/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 13<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4qU_NmL_3khUUVdSx1x70skYC7rByvefvr-NmZAbAQZQm-eC9kDAzarcotK_1MJy7NL-4YzfDnjyPoFmG4eBk2SKZ0LFg4SVE71g0rmY2hukMCj9bVbmnE36nJmr3CWmUASGK06ZO1qg/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBV3lcvIS3TXBHgKWZGF_-QYJ64dXSwRKoace3St-zyUn2mcHqMgk9bG14HW5czmPO0RPFK-PV_-AZhNUrfgRfN8gUUbeWKkQ4AE8OiW2sivlFm_5F3SRuSmBEY4rJYZLLUFrHWfMx_r4/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 14<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBp9r6GEc5_kS31mrBeqwtvKInmtIFoflNNAviQ1obSQI4jJ4YE4XCw2oCkKIiMpvpAQdigYJbky7xbKmobcwFy-Hz2T0B-JLxyl-opwrBKH0AlGOc1xVtYqA8MOgYRX8-jZN3Ry7fVM0/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvYZE3qrElYvtrd8btQkv_tPT6kI95HH4oclB8hR4MbqDUodD4LAAvEZkxyLYPjQFEtQ1YPEP9w6_l4oYDUCbzqe-btjIaWwMnXSgiPqZYZ3fEd9IFxZYzSN9kfztBM-0p1hSB0orIUE/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj06uEv0GbW-6g50rZEdPuUgEwDdebdoybZAkBiBjRlBnx-BzWhqUjs6Z25mx-K4ExFO9UmPVQ1mtWIcVRtWfkXKMPriBf7RoKy829e0n5W26A52HhTHd7pX9S_xgS2oXHT5oSawVBSQ6c/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QffE6J9lqpis0T7HYdc0DI5jL1Aaqu1dgnrKukTeu0HUOMoQo_hftxHJG-qRgQFWM-UshmsNyxcm8jo_aCqm67AIOb5nBkGgYQKF7VIgTDXL7pJC3SmCaR2fnBIwoFbxeLKtvtiER5k/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 15
استايل 16<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMnTy4vzbRMR8xc5XQ-5lR085ta8fzGyTc0I19wZ4Y5NSV8PckjmdEHMvka-BRibt2D6_q-kkNBq4C5mI6B6aknygRG6X4TTviyGRiuMPd5MMpc0bjwZi4QyIM0CpWs-GF_EY13w7V_0/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicE-OOK0Q4GnK05zwsM2bFlljppSbHhCyjUkNldZ4qSbDAPVUJ4WELKcGUy0WbRnIB_eBr4CMECy2MJyMxISG6-PGc0x0EX3CmelHPX6WGSeCwWUiojseLHSbH16PmApSDmYuVTz2fAXo/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 17<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrywj7boZPRWuI_90IQcydfXtJBT0NEGwYJOgMAPkXpSgLTeJiaG3yyA1h6y_J7XQ_ceMhXa5hx0PbKh1IclVYFlSBHq-KowGlYxaSsMDfwA82B7EjSny0aT3gtF4PmexjqK3-5hBBjNo/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyKQKRJ5pa1bUfcpPgI6ph4Ma88XXt0hI9EDzUZEr3PvW2i0cR-JeApt5y3yfuNzn_WKu-VcF9uPYYZ1_eJaBRUnFI-9tLey35VsJYq2rCX24fABlBA3TVQDHGGehafydFN1FpHzdH_dk/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 18<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGqWOACGyNtHz-50D2xcmQ3i4p09v9_7KKQfdnohdkBCTi9QNoJ9kzYODuO0sL6cIyc-QQ0B58CP1NqJvxJkLG6lcxxhjAUGjSeZQ6-ZXGAVE-3kli7Nk1hIB0TlK1gopr4-amFQGMIc/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdRPXxUC1V503Bi2NFP2oqEV64Jve8HV8enrI9RZzGUX3ddKHpICT7yX7AUCGycqvRjoK9m3lsXJqhSPKfYOG6bwC-4oHf9S7Iu-zw3Fhz0r216rZUJ9ZMRziD4I11RP0Jd_pGH_Q1oHE/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 19<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JwD05Std4UgYLj2My8VlIYuXU9K2dWZuRDLC4E9EmHptRsNGwSC91NErl83h3jolbCbDV1xQ2C4PnBlk5ZWwj978QELZ_iIJo-PPii9mQHMdN2R4Id7yF5bI-GklxGyAMrTceWbY2UY/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsWeoZ8VNknpjowTmHBJFBphUnMAbN9h5hLXYeRcMTrQRuzoWDS2W7t8sgxSreXOcQMvSg2L0lvn9vS8ilvpUgf5OWGnEoxUL-cIzZDoltrQviuzhnlsFwnEPUNmvwDglBjpktnY9QTk/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 20<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp8I4RY40XrmSZgXZwlJTTl5adf_33EmWIdkiHb2hX0WA91Dbe3ZJyktSFb0X2Fm81PmQRCCT31w9dVf7uoKM3EKweewZm1XD-S1FC_RMB4zLvD63EepIT1S8OE89qCnRjSJZgIgceBJc/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNYyKWQihAnCrHepTz-_hxRET7rXenZDOG0Mo5AxJXwzR5buyQsrtr7Rz8nvnDrIiuVdg6_gaDE1BNgHn60HMuPXfxMpKyPc4DNjP4sortbslje8qQWfddCUj6K9MUFDtu1fm4PsKgz0/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 21<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhraeHufgjaXLh8TGRi_bRZDnUbDg6upmIvcnlonvUrjDkTwdtsAjrRwxAGVBR4FEPVO5Gcz7NEBPPw7D3McQJXRWUeCosI3y_39V_RtC87Kltq26mDO1viHOl8NR3M4M0zwRYDQPIMXDk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityyaUsrcwDkFHJ-1qr-6LB4X_7CLwG5NMYL1twm-CxIotorp9ZSsIjSkYTD3X-Q0k7w0Dw_fnSkU8UYqUEUB49Ft8AjK_IXwO84sdIxmp2K_LPQoMT6OKNBRcgWXvBU73uynaOcHg8XM/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 22<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJUmIHWFgYkvYh5rdqFslALQcECQMgSKQcgyxIxrBMk9Q_kP-hVS2qDQa4UAZ1cr5MISacNYOGkVCYKJKWOWzOzen8avzDA-_0PwID8Taghg-_iWo6_omW4GOL5iZfM67sL0XcuDZvxE/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWYukth0VOKy32qfESH1GkSObXZgCP6s1zyTlvmbSch_hM3AjGIHm2U5WTW881iydwfEEUuzphrh6a942ja31M6tqTIseLTaBfmdiQNezeMkTKbtanwUZ4qfa1pVnduxOUyevq40y2LY/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 23<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRc5EYRh5wgsMixlXMgiN3c4RTAiih0udQRIAdrYFN6YPTIXLvDqcK6YEGnxJXba3hG7s4lCEPWHWiCMkIh5io8eNkxH7SZZpBuBoX1c7iFJPSnCzEF6nVMixSiREn3xdrvuRfgqeeD7M/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfiUEZMojqvvDrKyrvt9uowt5hQTGsdH8wfzc0GeJpFkwjzyyjsuVkKE3ZI5bUBYY_qmreMPOkJz8pzj0EheQq7PN0YCZJB83wxoYNwWi7Q_2YUKoAh-uG-D72Hlix2T522x1A7Jm7msI/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 24<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 25<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 26<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipu2rdfWepvhj6Ld8nnF9GXY41fDTl9pnxtQKxKlSfG5gXIQK3cuInWPhBfd6Z6Yhu7iOQMiq6fHshyFVSmDPfD03ADHaOBtpVWKsqcfnraLkZQzf41S3tun0D8by4rM57dHj4rMIEEhg/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpGyxsi2qtnh_lTr16Em564rBQ9b3iPQdE3OY-WXTKKfb1BD0vRKwVndx4rrGzeeHq8okC1uqUkzlUUstNVf5WWS3YWiQsSY2nJzcXrJqZDVtyyXdnYarQrVngM3fjg_R-Kzv6wxe02E/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 27<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6D7QMa16jZwIGefroybuY9nGFzSsz0mAGKVotsPmgAki15F4nq2ak6tI6pTvHsaci7Y8gmP0JDZszoNpNadqUozUNM4n-pFdHwknWbVg18JQ6rd7Y0LSD742LFm_IR0q0FnAJTLAYi0/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqRgeHQ4WG_0XHmTM9SUkmdiysCaZDMwdmwfUQpkJWh3IHk4l8b1Q-4n0Kgany9aElgND2eCin9pxYqPS1jPH4Xfvn5BomRhplyPnlfa0RBk27UfX14eph2jdkxqYyB_MC9x8aIw4rQ0/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 28<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWv3H_UbI3imRpjXU9oz_DenWRKCk02oYfITo4ATfAzlpF3YU2EKjoB1uSSae9RcOcHkSDUvT6lsQUEAiMOuOQORGo6wD8e1dklh2n1yOCAxnrpTXEgj-OlGMjg9bs5w5ehJj2l-nR0uM/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjj7t-UnU6ka0aEEm0Z70IhSeJ-1FzBQK-T0qxuMUhUvZD5uqMTKvR8upT2t6GcmQ0DeSYao-j5tNhPB2A0CSYr1mt1P5xWRGjlj9hoCUR9LPai0kxcFVyxtbaCPHNmcQQEjGXYCBNuOY/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 29<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwAlS4KtXRL71LjMmsnNVcAEfluzh7ddBGXQLaNEZAlt7zeRiLbgSoiGfXfV6AVDdFmaACBTPi1EeaatPpVj5LZ9WpRJsWWpk1_SaRGzftSkIhzDV5dw2uxzK7fAq2tsVRQjcFh53mDk2-/s1600/tableft5-namkna-ngoctra.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjIKSRxcs2C8qYEgTWX69KOCm8EhdKXlV3yCT7U0LSqYA75v7RPuSV8kaSlLqo8bCLFqjkY3L6psy3Jw2UP4w7bHdoLJz2hj2aTGVR6kVzJh5H_ptEFWrzSoAX81afZpIZ4l8rXRcGCU5/s1600/tabright5-namkna-ngoctra.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
استايل 30<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-_m_Rd0ewnsBJrpvMKnbAep4FzeRmuj64qHtaGhIf9ilaGjcit6FKN6tAYV1mdnY6y72YYWga2nm3HQdbAx4ExOsljKrXUWrStKuMUv373f3hwuH_8g6k9CbX4ZwRx5ht3pg1lv9tmY/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wOFkQhDar2g9hlZwuqp5RPZBjnsXv6gQt4ocZa7yZ8iYkQnE2bVFy_qDQHI3hC3GeCtpoW-o4R1BUz-reuXj5qSx69ZVSl2XPhvXyfQ0v9iZV4pCz44RgKNvtkFIhU9LeVa4i07rgQY/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0f2TNnz8WzXmJ5LYn_z7hHmdj_zk1qhIUTB2TaP1NELsmcFxnMOL8oopaPiKDh_wlGRr7BoMWqPw8_hRLkszttJpgoEk36gW257fxoq5skaFFsAOtolovNsYyRk12K0a5PTM-BIZt3M/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MTruKgeRXaWlUJZ2hyphenhyphenfX19w1Hyyj25fTSe8P2zfAZ_roCRu6p3NbyjR08xUETUoOjtyf5XZl4fpBID6ycfXc2Hw7tdgXhwUelxTjhjykFovdgrJiCDuI796vA-xE-R0kHm8uCUepGq0/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
اخر الموضوع و شكرا
هشام ابرشى
اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..
عبّر عن تعليقكالإبتسامات