كما هوة العنوان لقد رئيت الكثير من المبرمجين او مطوري القوالب يذكرون كلمة responsive
ان القالب responsive ان الموقع responsive الخ...
ما المقصود بالـ responsive لقد بحثت عنها ولاكن لم اجد مقالة عربية او شرح عربي
ما هية تصاميم المواقع المتجاوبة responsive
كون الموقع Responsive ، يعني انه طريقة عرض العناصر تتكيف مع حجم الشاشة التي تعرض عليها ، مثلا نقوم بعرض قائمة عريضة للموقع و 4 بلوكات واحدة جنب الاخرى عندما يكون حجم الشاشة كبيرا ( 1024px كمثال ) ، أما عند الدخول للموقع من هاتف محمول نقوم بتحويل القائمة الى قائمة منسدلة تظهر بعض الضغط على زر يشير الى قائمة ، كما نقوم بتصغير حجم البلوكات و عرضها الواحدة اسفل الاخرى أو بلوكان في كل سطر .
هذا أقصى ما استطعت ان ابسطه أتمنى أن تكون الفكرة وصلت.
شكرا لك اخي الكريم
لقد فهمت معنها الان ولاكن لم استطيع ان اعمل القامة المنسدلة
هل طريقة عملها مثل القائمة العادية
<div id="top-nav">
<ul>
<li><a href="#">عن الموقع</a></li>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">المدونة</a></li>
<li><a href="#">اضف كتابا</a></li>
<li><a href="#">انضم لنا</a></li>
</ul>
لعرض قائمة منسدلة عليك القيام بالتالي
CSS
ul,li {
list-style-type: none;
}
#top-nav ul li{
width: 100px;
position:relative;
}
#top-nav>ul>li a{
width: 100%;
display:block;
color: #fff;
padding:5px;
background-color: #000;
text-decoration: none;
}
#top-nav>ul>li>ul{
position:absolute;
right:0px;
display:none;
}
HTML
قائمة عن الموقع اتصل بنا المدونة اضف كتابا انضم لنا
JQuery
$(document).ready(function($) {
$('#drop-down').on('click',function(event){
event.preventDefault();
$this = $(this);
$this.siblings('ul').slideToggle();
})
});
لم ارد تخصيص CSS أكثر من ذلك ولكن المثال كافي لكفي تفهم كيفية القيام بالعملية.
الموقع لا يسمح باضافة أكواد HTML في التعليق ، لذا قمت بعمل JsFiddle
responsive تعني متجاوب مع التغيرات في قياسات الشاشات و يمكن تصفح الموقع باستخدام ( متصفح سطح مكتب أو متصفح جوال أو أجهزة كفية ) بسهولة دون أن يكون هناك أي خلل في التصميم .
أتمنى أن أكون و الأخوة قد أفدناك .
التعليقات