css : navigation bar شريط تنقل بطريقة "الضوء"وتصفح متحرك بطريقة خيالية باللون الاخضر البارد شاهده ولن تندم ,,,, بدون جافا

موقع جنتل الاردن هو عبارة عن فكرة بسيطة جدا مواضيع نطرحها نؤلف نترجم ونقتبس كل ذلك سبيلا في خدمة القارئ العربي
 
الرئيسيةس .و .جمكتبة الصوربحـثالتسجيلدخول

css : navigation bar شريط تنقل بطريقة "الضوء"وتصفح متحرك بطريقة خيالية باللون الاخضر البارد شاهده ولن تندم ,,,, بدون جافا

الموضوع السابق الموضوع التاليمركز رفع الصور
Posted By

Moh'd S Hammoudeh


انشرالموضوع
الرد عن طريق الفيس بوك
الابلاغ عن الموضوع




مواقع صديقة
All Tricks And Tips
Entertainment
أضف موقعك هنا
أضف موقعك هنا


صفحات فيسبوكية رائعة
All Tricks And Tips
Entertainment
المحاسبين
موقع جنتل الاردن
أضف صفحتك هنا
أضف صفحتك هنا


صفحتنا الرسمية على الفيس بوك

صفحتنا الرسمية على تويتر



الأحد مارس 10, 2013 11:08 pm ساندنا على الفيس بوك  ساندنا على اليوتيوب ساندنا على تويـــــــتر







السلام عليكم

css : navigation bar

شريط تنقل بطريقة "الضوء"وتصفح متحرك بطريقة خيالية باللون الاخضر البارد شاهده ولن تندم ,,,, بدون جافا


اولا تركيب الكود في المدونات :

1.) اذهب الى blogger
2) افتح مدونتك التي ترغب ان تضيف لها الكود .
3) اذهب إلى انسيق.
4) انقر على "إضافة أداة" حيث تريد إضافتا
5) انتقل الآن إلى <"HTML-JAVASCRIPT">
6) انقر على "+" رمز لإضافته.
7) الآن انسخ الرمز أدناه والصقه إلى هناك. أترك عنوان فارغ.
9 انقر فوق.) حفظ،


اقتباس :

<!-- www.algantel.com -->

<style type="text/css">
.exespotlightmenu{
width: 100%;
overflow:hidden;
}
.exespotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.exespotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.exespotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.exespotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.exespotlightmenu li a exespan{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
<div class="exespotlightmenu">
<ul>
<li><a href="##########"><exespan>Home</exespan></a></li>
<li><a href="##########"><exespan>About</exespan></a></li>
<li><a href="##########"><exespan>algantel.com</exespan></a></li>
<li><a href="##########"><exespan>Privacy</exespan></a></li>
<li><a href="##########"><exespan>Contact Us</exespan></a></li>
</ul>
</div>
<!-- www.algantel.com -->




ثانيا: تركيب الكود في المواقع :

- اولا افتح الجزء الخاص بال html
- انسخ الكود التالي والصقه في جزء ال body
- احفظ السابق

اقتباس :

<!-- www.algantel.com -->

<style type="text/css">
.exespotlightmenu{
width: 100%;
overflow:hidden;
}
.exespotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.exespotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.exespotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.exespotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.exespotlightmenu li a exespan{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
<div class="exespotlightmenu">
<ul>
<li><a href="##########"><exespan>Home</exespan></a></li>
<li><a href="##########"><exespan>About</exespan></a></li>
<li><a href="##########"><exespan>algantel.com</exespan></a></li>
<li><a href="##########"><exespan>Privacy</exespan></a></li>
<li><a href="##########"><exespan>Contact Us</exespan></a></li>
</ul>
</div>
<!-- www.algantel.com -->


قم بتغيير اللون الاحمر الى اسم الرابط واللون الازرق الى الرابط


بالتوفيق











جميع المواضيع و الردود تعبر عن رأي صاحبها ولا تعبر عن رأي إداره موقع جنتل الاردن بــتــاتــآ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

الموضوع السابق الموضوع التالي
صفحة 1 من اصل 1








جميع الحقوق محفوظة لبوابة جنتل الاردن © 2013