هذا الكود يعتمد على تغير الروابط وهو يصلح لجميع المدونات والمنتديات والمواقع
اضغط هنا وشاهد شرح الاستخدام بالفديو
الكود
\[code\]
<!-- تم برمجةوتصميم هذه القائمة من قبل wassimkourani.sy@gmail.com -->
<nav id='sob7an-allah'>
<input type='checkbox'/>
<label>≡<span>Menu</span></label>
<!-- أسفل هذه العبارة يجب تعديل الكلمات والروابط -->
<ul>
<li>
<a href='الرابط' title='الصفحة الرئيسية'>
<nav class='ab1'></nav>
الصفحة الرئيسية
</a></li>
<li>
<a href='الرابط' title='برامج اندرويد'>
<nav class='ab2'></nav>
برامج أندرويد
</a></li>
<li>
<a href='الرابط' title='برامج الكمبيوتر'>
<nav class='ab3'></nav>
برامج الكمبيوتر
</a></li>
<li>
<a href='الرابط' title='مقالات ومواضيع عامة'>
<nav class='ab4'></nav>
مقالات ومواضيع عامة
</a></li>
<li>
<a href='الرابط' title='المكتبة العامة'>
<nav class='ab5'></nav>
المكتبة العامة
</a></li>
<li>
<a href='الرابط' title='المكتبة الصوتية'>
<nav class='ab6'></nav>
المكتبة الصوتية
</a></li>
<li>
<a href='الرابط' title='المكتبة المرئية'>
<nav class='ab7'></nav>
المكتبة المرئية
</a></li>
<li>
<a href='الرابط' title='منوعات'>
<nav class='ab8'></nav>
منوعات
</a></li>
</ul><ul>
<!-- أعلى هذه العبارة يجب تعديل الكلمات والروابط -->
</ul>
</nav>
<style type='text/css'>
/\*--أسفل هذه العبارة يمكنك تغير روابط الأيكونات أي الصور--\*/
.ab1 {
width:28px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/0.png');
float:right; margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab2 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/1.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab3 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/2.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab4 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/3.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab5 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/4.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab6 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/5.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab7 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/6.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab8 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/7.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
/\*--أعلى هذه العبارة يمكنك تغير روابط الأيكونات أي الصور--\*/
.nav,.nav ul,.nav ol,.nav li{margin:0;padding:0;list-style:none}
.nav li{display:inline}
\#sob7an-allah{
font-family:Arial, Helvetica, sans-serif;
text-align:right;
margin:-3px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/nav1.gif');
color:#FFF;height:30px;text-transform:uppercase;font-size:95%}
\#sob7an-allah ul.menus{background:#255993;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
\#sob7an-allah a{
font-family:Arial, Helvetica, sans-serif;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/nav.gif');
font-weight:bold;
font-size:16px;
margin:0;
display:block;color:#FFF;line-height:30px;text-decoration:none; padding-left:4px; padding-right:4px; padding-top:0; padding-bottom:0}
\#sob7an-allah ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
\#sob7an-allah ul{height:30px}
\#sob7an-allah li{float:right;display:inline;position:relative}
\#sob7an-allah input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
\#sob7an-allah label{font-weight:bold;font-size:20px;display:none;width:35px;height:31px;line-height:31px;text-align:center}
\#sob7an-allah label span{font-size:14px;position:absolute;right:30px}
\#sob7an-allah ul.sob7an-allahs li{display:block;width:100%;text-shadow:none}
\#sob7an-allah ul.sob7an-allahs a{color:#FFF;line-height:35px}
\#sob7an-allah li a:hover{background:#3366FF;color:#FFFFFF}
\#sob7an-allah li:hover ul.sob7an-allahs{display:block}
\#sob7an-allah ul.sob7an-allahs a:hover{background:#5FC6EB;color:#FFFFFF}
@media screen and (max-width:700px){
\#sob7an-allah{position:relative}
\#sob7an-allah ul{background:#2E4F80;position:absolute;top:100%;right:0;z-index:3;height:auto;display:none;width:50%}
\#sob7an-allah ul.sob7an-allahs{width:100%;position:static;padding-left:20px}
\#sob7an-allah li{display:block;float:none;width:auto}
\#sob7an-allah input,#sob7an-allah label{position:absolute;top:0;right:0px;display:block}
\#sob7an-allah input{z-index:4}
\#sob7an-allah input:checked + label{color:white}
\#sob7an-allah input:checked ~ ul{display:block}
/\*--أسفل هذه العبارة يمكنك تغير روابط الأيكونات أي الصور--\*/
.ab1 {
width:28px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/0.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab2 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/1.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab3 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/2.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab4 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/3.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab5 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/4.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab6 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/5.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab7 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/6.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
.ab8 {
width:31px;
height:27px;
background-image: url('https://googledrive.com/host/0Bw9uNFBza3KcfnNEckx6SUV4LWJkcmRZSXp4Q2pfR0VmcFlXYmM3czhZSU1KQ0cwbUVpS1E/7.png');
float:right;
margin-left:3px; margin-right:0px; margin-top:1px; margin-bottom:0px
}
/\*--أعلى هذه العبارة يمكنك تغير روابط الأيكونات أي الصور--\*/
}
</style>
\[/code\]