منتدى الدعم و المساعدة لأحلى المنتديات
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
منتدى الدعم و المساعدة لأحلى المنتديات

دعم أحلى منتدى

كود الاختيار المتعدد بشكل جميل لصفحات ال HTML

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد HTML

اذهب الى الأسفل

كود الاختيار المتعدد بشكل جميل لصفحات ال HTML Empty كود الاختيار المتعدد بشكل جميل لصفحات ال HTML

مُساهمة من طرف The Rock abdo الثلاثاء 8 نوفمبر 2011 - 12:50

كود رائع و منسق اقتبسته من اسلوب الاى باد يمكن ان يستخدم فى بوابات المواقع و المنتديات

الكود :
الكود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title>Happy 3ID</title>
<script type="text/javascript"

src="http://yourjavascript.com/1346118141/jquery.js"></script>
<script type="text/javascript"

src="http://yourjavascript.com/4110831136/interface.js"></script>

<style media="screen" type="text/css">

body {
   font: 11px Tahoma, Helvetica, sans-serif;
   padding: 0;
   margin: 0;
}
img {
   border: none;
}

/* dock - top */
.dock {
   position: relative;
   height: 50px;
   text-align: center;
}
.dock-container {
   position: absolute;
   height: 50px;
   padding-left: 20px;
}
a.dock-item {
   display: block;
   width: 40px;
   color: #000;
   position: absolute;
   top: 0px;
   text-align: center;
   text-decoration: none;
   font: bold 12px Tahoma,Helvetica, sans-serif;
}
.dock-item img {
   border: none;
   margin: 5px 10px 0px;
   width: 100%;
}
.dock-item span {
   display: none;
   padding-left: 20px;
}

</style>


</head>
<body>

<!--top dock -->
<div class="dock" id="dock">
  <div class="dock-container">
     <a class="dock-item" href="http://help.ahlamontada.com/"><img

src="http://i41.servimg.com/u/f41/14/51/27/24/am-ico11.png" alt="home"

/><span>Home </span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/montada-

f1/"><img src="http://2img.net/i/fa/fdf/annonce.png" alt="News" /><span>Notices

and News</span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f5-

montada"><img src="http://2img.net/i/fa/fdf/questions.png" alt="FAQ"

/><span>FAQ</span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f79-

montada"><img src="http://2img.net/i/fa/fdf/magic.png" alt="Advanced

techniques" /><span>Advanced techniques</span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f84-

montada"><img src="http://2img.net/i/fa/fdf/peindre.png" alt="Design"

/><span>Design services and innovation</span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f22-

montada"><img src="http://2img.net/i/fa/fdf_ar3/multib.png" alt="Support"

/><span>Support Section AhlaBlogs</span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f7-

montada"><img src="http://2img.net/i/fa/optimisation_fdf/common/medaille.gif"

alt="calendar" /><span>General Thought Forum </span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f15-

montada"><img src="http://2img.net/i/fa/fdf_ar3/discussion_ar.png"

alt="Discussion" /><span>Discussion Section</span></a>
     <a class="dock-item" href="http://help.ahlamontada.com/f38-

montada"><img src="http://2img.net/i/fa/fdf/ampoule.png" alt="Suggestions"

/><span>Suggestions Forum </span></a>
  </div>
</div>



<!--dock menu JS options -->
<script type="text/javascript">
   
   $(document).ready(
      function()
      {
         $('#dock').Fisheye(
            {
               maxWidth: 50,
               items: 'a',
               itemsText: 'span',
               container: '.dock-container',
               itemWidth: 40,
               proximity: 90,
               halign : 'center',
               valign : 'center'
            }
         )
                        $('#dock2').Fisheye(
            {
               maxWidth: 60,
               items: 'a',
               itemsText: 'span',
               container: '.dock-container2',
               itemWidth: 40,
               proximity: 80,
               alignment : 'left',
               valign: 'bottom',
               halign : 'center'
            }
         )
      }
   );

</script>
</body>
</html>

صوره للكود:
كود الاختيار المتعدد بشكل جميل لصفحات ال HTML Captur17

شكرا لهذه المسابقات  Cool


عدل سابقا من قبل Mohamed Nsr في الجمعة 26 ديسمبر 2014 - 2:04 عدل 1 مرات (السبب : اضافة صوره للكود من قبل AmEr DeSiGN + تعديل عنوان الموضوع)
The Rock abdo
The Rock abdo
 
 

ذكر
عدد المساهمات : 83
معدل النشاط : 5013
السُمعة : 0

http://el3abha.yoo7.com/forum

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: أكواد HTML

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى