قائمة منسدلة تقنية أحترافيه - أربع الوان
 |
| قائمة منسدلة تقنية أحترافيه |
بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري
قائمة احترافيه منسدلة بأفضل التقنيات والتي لاتخلوا مدونة الا وتحتاجها , القائمة تعتبر من اركان الموقع المهمه والتي يستدل بها الزائر بأقسام المواقع وروابطه المهمه .
الحمدلله انتهيت من تعديل القائمة وجعلت منظرها عصري وجذاب وذالك بتنسيق الالوان والاحجام , ايضاَ تم اضافة الخط الكوفي الجميل الى القائمة وروابطها .
الحمدلله انتهيت من تعديل القائمة وجعلت منظرها عصري وجذاب وذالك بتنسيق الالوان والاحجام , ايضاَ تم اضافة الخط الكوفي الجميل الى القائمة وروابطها .
اولا: معاينة مباشرة للقائمة
القائمة متوفره بأربع الوان اختر مايناسبك منها ثم اتبع الاتي :
طريقة التركيب :
- أذهب الى التخطيط .
- ثم اضافة اداة جديده > يجب ان تكون تحت الهيدر مباشره .
- ثم الصق كود الاداة التي تريدها , طبعاَ مع تعديل الروابط والاسماء بما تريد :
الشكل الاول " الرمادي :
صورة :
 |
الكود:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4D4D4D;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #5C5B5B;
border-bottom: #5C5B5B;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #5C5B5B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #575757;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #5C5B5B !important;
padding: 10px;
}
</style>
الشكل الثاني " أحمر " :
صورة :
 |
| قائمة مسندلة احترافيه لون أحمر |
الكود :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #DD395A;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #CC173B;
border-bottom: 4px solid #DD395A;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #CC173B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #DD395A;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #CC173B !important;
padding: 10px;
}
</style>
الشكل الثالث " أزرق " :
صورة :
 |
| قائمة مسندلة احترافيه لون أزرق |
الكود :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4BCDF7;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #39B8E9;
border-bottom: 4px solid #4BCDF7;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #39B8E9;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #4BCDF7;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #39B8E9 !important;
padding: 10px;
}
</style>
الشكل الرابع " أخضر " :
صورة :
 |
| قائمة مسندلة احترافيه لون اخضر |
الكود :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
<li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
<ul> <!-- القائمة الفرعية -->
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<li><a href="#">وصلة رئيسية</a>
<ul>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
<li><a href="#">وصلة فرعية</a></li>
</ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}
#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #42E27C;
height: 45px;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #2ABD5F;
border-bottom: 4px solid #42E27C;
}
#menu > ul > li > ul {
position:absolute;
top:49px;
display:none;
margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #2ABD5F;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #42E27C;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #2ABD5F !important;
padding: 10px;
}
</style>
ليست هناك تعليقات:
إرسال تعليق