مساحة إعلانية

الخميس، 13 نوفمبر، 2014

الخميس، 13 نوفمبر، 2014

قائمة منسدلة احترافية بتقنية Ajax

Ajax Menu
قائمة احترافية تعمل بتقنية Ajax يمكنك من خلالها جلب آخر المواضيع من الروابط المضافة للأقسام اضافة على احتوائها على محرك بحث يعمل بنفس التقنية فيمكنك البحث مباشرة دون الإنتقال لصفحات اخرى القائمة بتطويرات حصرية لكن مدون وسيتم شرح تنسيق القائمة وتعديل الوانها لتتناسب مع الوان قالبك ويمكنك معاينة القائمة من الرابط التالي
يمكنك تركيب القائمة في آداة HTML/JavaScript

<style>
#cnmujmecontain {
background: #fff;
border-bottom: 1px solid #e6e6e6;
float: right;
position: absolute;
right: 0;
top: 0;
width: 100%;
 }

.cnmuajm * {
margin: 0;
padding: 0;
 }

ul.cnmuajm {
list-style: none;
line-height: 1;
overflow: visible!important;
 }

ul.cnmuajm:after {
margin: 0;
padding: 0;
content: ' ';
display: block;
height: 0px;
clear: both;
 }

ul.cnmuajm li {
float: right;
display: inline;
position: relative;
text-transform: uppercase;
 }

ul.cnmuajm li a {
display: block;
line-height: 50px;
padding: 0 20px;
text-decoration: none;
color: #2c2c2c;
transition: all 0.7s ease-in-out;
 }
ul.cnmuajm li a:hover { background:#00a7fb; color:#fff;}
 .hmenulin {
  background: url("https://lh3.googleusercontent.com/-E2NkQvKwGUE/VGOaM-GUOoI/AAAAAAAAFEw/Ac6VSGgcmkk/s24/home_icon.png") no-repeat scroll center center #00a7fb;
  height: 50px;
  margin-left: 2px !important;
  width: 24px;
}
.hmenulin:hover {background: url("https://lh3.googleusercontent.com/-E2NkQvKwGUE/VGOaM-GUOoI/AAAAAAAAFEw/Ac6VSGgcmkk/s24/home_icon.png") no-repeat scroll center center #000 !important; }
ul.cnmuajm ul {
position: absolute;
display: none;
top: 100%;
border: 1px solid #ccc;
 }

ul.cnmuajm li:hover > ul {display: block;}

ul.cnmuajm ul li {
z-index: 72;
float: none;
min-width: 160px;
background: #f5f5f5;
text-shadow: none;
 }

ul.cnmuajm ul li a {
text-transform: none;
color: #aaa;
 }

ul.cnmuajm ul li a:hover,ul.cnmujaxmenu ul li a.hover {background: #00A7FB;}

ul.cnmuajm ul ul {
display: none;
right: 100%;
top: 0;
 }

ul.cnmujaxmenu li div.submenu {
position: absolute;
width: 500px;
z-index: 90;
right: 0;
top: 100%;
overflow: hidden;
min-height: 150px;
background: #f0f0f0;
-moz-transform: translate(0,30px);
-webkit-transform: translate(0,30px);
-o-transform: translate(0,30px);
transform: translate(0,30px);
transform-origin: 50% 0;
visibility: hidden;
opacity: 0;
color: #929292;
box-shadow: 0 10px 7px -7px rgba(0,0,0,0.1);
transition: all 0.3s ease-in-out;
 }

ul.cnmujaxmenu li:hover div.submenu {
visibility: visible;
opacity: 1;
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
 }

ul.cnmujaxmenu ul ,ul.cnmujaxmenu ul li {
display: block!important;
border: 0 none!important;
margin: 0!important;
padding: 0!important;
 }

ul.cnmujaxmenu ul li {
background: none!important;
float: none!important;
 }

ul.cnmujaxmenu ul.verticlemenu {
position: absolute;
width: 33%;
right: 0;
top: 0;
bottom: 0;
background: #202020;
 }

ul.cnmujaxmenu ul.postslist {
position: relative;
display: block;
width: 65%;
float: left;
margin: 0 0 15px 0!important;
background: none;
 }

ul.cnmujaxmenu ul.postslist li {
display: block;
overflow: hidden;
position: relative;
min-height: 60px;
padding: 15px 110px 15px 8px!important
 }

ul.cnmujaxmenu ul.postslist li .imgCont {
position: absolute;
right: 0;
top: 15px;
width: 100px;
height: 70px;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 1px solid #929292;
 }

ul.cnmujaxmenu ul.postslist li .imgCont img {
position: relative;
top: -20px;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
display: block;
 }

ul.cnmujaxmenu ul.postslist li a {
display: block;
line-height: 1.4;
padding: 0!important;
color: #666;
transition: all 0.7s ease-in-out;
 }

ul.cnmujaxmenu ul.postslist li a:hover {
color: #00A7FB;
background: transparent;
 }
 .verticlemenu a:hover {color: #fff;}
ul.cnmujaxmenu .loader {
background: url('https://lh3.googleusercontent.com/-taZFnpxM_xo/VGN7mTXCwrI/AAAAAAAAFEg/cMd1XWKxFEo/s16/loading.gif') no-repeat scroll 0 0 transparent;
width: 22px;
height: 22px;
position: absolute;
top: 50%;
margin-top: -11px;
left: 5px;
 }

ul.cnmujaxmenu .menuArrow {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid #fff;
display: block;
height: 0;
margin-top: -4px;
position: absolute;
left: 11px;
top: 50%;
width: 0;
 }

#cnmujaxmenu {
height: 50px;
width: auto;
position: relative;
font: 14px tahoma;
margin: 0 auto;
padding: 0 20px;
max-width: 950px;
 }
 /*====== Search ======*/
 li.search-form {
float: left!important;
line-height: 50px;
margin: 0 20px 0 0;
 }

li.search-form .searchbar {
border: none;
font: 14px tahoma;
margin-left: -5px;
padding: 10px 5px;
background: #f9f9f9;
color: #777;
width: 130px;
 }

li.search-form .searchbar:focus {
border: none;
outline: none;
background: #fafafa;
color: #666;
 }

li.search-form .searchsubmit {
background: #00A7FB;
border: none;
color: #fff;
cursor: pointer;
font: bold 14px tahoma;
padding: 8px 5px;
transition: all 0.7s ease-in-out;
 }

li.search-form .searchsubmit:hover {background: #000;}

#search-result {
border-top: none;
background-color: #FFF;
padding: 10px;
margin: 51px 0 10px;
width: 278px;
height: auto;
position: absolute;
top: 0;
left: 0;
max-height: 310px;
overflow: auto;
z-index: 99;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
display: none;
 }

#search-result li {
border: 1px dotted #eee;
color: #aaa;
font-size: 0;
line-height: 1em;
margin: 0 0 5px 5px;
overflow: hidden;
padding: 10px;
width: 240px;
 }

#search-result img {
float: right;
margin: 0 0 0 8px;
border: 3px solid #EEE;
 }

#ajax-search-form a {
color: #888;
line-height: 1.9em !important;
font: normal 12px tahoma;
text-decoration: none;
padding: 0;
 }

#search-result ol,
    #search-result h4 {
margin: 0;
padding: 0;
 }

#search-result h4, #search-result strong {
display: block;
margin: 0 0 10px 0;
font: normal 12px tahoma;
color: #00A7FB;
 }

#search-result ol {
margin: 0;
text-align: right;
 }

#search-result ol a:hover {
color: #00A7FB;
text-decoration: underline;
background: none;
 }

#search-result .close {
display: block;
position: absolute;
top: 0;
left: 10px;
line-height: normal;
color: #f00;
font-size: 18px;
 }
#search-result strong {color: #00A7FB;}
#blog-pager {
margin: 1em 0;
text-align: center;
overflow: hidden;
clear: both;
 }
</style>

<div id="cnmujmecontain">
<ul id="cnmujaxmenu" class="cnmuajm">
<li><a class="hmenulin" href="/"></a></li>
<li><a href="#">تعديل</a></li>
<li>
<a href="#">قائمة منسدلة</a>
<ul>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
</ul>
</li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li class='search-form'>
<form action='/search'  id='ajax-search-form' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='البحث في الموقع ...' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='البحث'/>
</form>
</li>   
</ul>
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/Ajaxmenu.js' type='text/javascript'></script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/Ajax-search.js' type='text/javascript'></script>
<script>
jQuery(document).ready(function($) {
 $('#cnmujaxmenu').ajaxBloggerMenu({
  numPosts : 3,
  defaultImg : 'https://lh5.googleusercontent.com/-ZsfNyKwmqRw/VGNAlUqogpI/AAAAAAAAFEI/bUv8oUcafwI/s500/No_image.gif'
 });
});
</script>

التنسيق

هذا tahoma هو نوع الخط الإفتراضي للقائمة يمكنك تعديله
لتغير اللون الأزرق في القائمة ابحث عن اللون التالي #00a7fb وعدله بكود اللون الذي تريد ملاحظة ستجده متكرر عدة مرات
هذا #fff هو لون خلفية القائمة في حالة تعديله بلون غامق كالأسود مثلا ستعدل اللون التالي #2c2c2c وهو لون الروابط لكي تظهر
وهذا #e6e6e6 هو لون الإطار السفلي والرقم 1 هو حجمه
كما نرى القائمة ظاهر بالأعلى لو اردناها تظل ثابتة عند التمرير  نستبدل هذه الكلمة absolute  بهذه fixed
في حالة كانت القائمة تغطي جزء عام من المدونة في المنطقة العلوية يمكن تجنب هذا بإضافة الكود التالي فوق الوسم ]]></b:skin>
body {margin-top: 50px !important;}
الرقم 50 هو درجة البعد من الاعلى يمكنك زيادته او انقاصة حتى يضبط معك المظهر
في حالة اردنا ان تكون القائمة تظهر في مكان الآداة يعني لو كانت الآداة التي أضفنا بها القائمة في مكان مناسب أسفل الهيدر مثلا ونريدها في هذا المكان دون ان تظهر بالأعلى فقط ازل الأكواد التالية من بداية كود الآداة
-bottom
position: absolute;
right: 0;
top: 0;

الإستخدام

الرقم 3 الموجود في نهاية الكود هو عدد المواضيع التي تظهر في الأقسام
بتكرار الكود الاخضر داخل الآداة تحصل على قائمة منسدلة جديد
<a href="#">قائمة منسدلة</a>
<ul>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
<li><a href="#/search/label/name">القسم</a></li>
</ul>
</li>
الأكواد الداخلية والتي علمت أحدها باللون البني كل سطر يساوي قسم جديد اما ان تزيد بتكراره او تقلل بحذف احدهم
رمز # هو رابط مدونتك أما كلمة name هي اسم القسم كما هو موجود في مدونتك اما كلمة  القسم هي الكلمة التي سيظهر بها في القائمة مثال لو لديك قسم بإسم Design ستضيفه بدل كلمة name لكن مثلا ان كنت تريد ان يظهر في القائمة بإسم عربي تصميم فتضيف كلمة تصميم بدلا من كلمة القسم
هذه اهم التنسيقات وأبسط شرح للإستخدام وبقليل من الخبرة يمكنك عمل الكثير من تلك القائمة
دمتم في امان الله




هناك 25 تعليقًا:

  1. بارك الله فيكم وجزاك الله ألف خير مدربنا الرائع
    نتمنى أن يجعله الله في ميزان حسناتك

    ردحذف
    الردود
    1. وفيك بارك الله اخي الكريم , سررت كثيراً بمرورك =r

      حذف
  2. الردود
    1. أهلا بك اخي محمد نورت الموضوع يا طيب =r

      حذف
  3. الردود
    1. تشرفت بمرورك أخي الفاضل
      ودي وتقديري =r

      حذف
  4. ما شالله عليك ... جميل جدا ومبدع ... كل الاحترام والتقدير :)

    ردحذف
    الردود
    1. ربنا يعزك أخي الكريم وبالتوفيق بإذن الله شاكر لمرورك

      حذف
  5. شكرا لك اخي عمرو موضوع رائع ايضا هذه نفس القائمة التي كنت احضر لها شرح هههههههههه =r

    ردحذف
    الردود
    1. ^_^ موفق اخي منير في شرحك بإذن الله
      دمت بكل ود

      حذف
  6. السلام عليكم ورحمة الله وبركاتة
    اهلا ومرحبا بك اخى
    حدثت معى مشكلة وانا اقوم بالتعديل على القالب مما جعلنى اقوم بتغيير القالب نهائيا فبحثت فى الانترنت عن قالب وقمت بتركيبة على المدونة ولكن وانا بعدل على القالب وبعد فترة من تركيب القالب على المدون. لاحظت ان الصفحات الثابتة لا يظهر فيها شئ
    يعنىانا ضايف فى الصفحة كلمات واكود ومش عاوزة تظهر فارجو حل هذة المشكلة وهذا رابط معاينة

    http://www.4hsoub.com/p/blog-page_1.html?m=0
    لكن لاحظ انها بتظهر على الجوال ام الكمبيوتر لا

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هذا خطأ في القالب غالباً في خاصية اقرأ المزيد الافضل ان تتواصل مع الموقع الذي حملت منه القالب
      فهو الأدرى به وبالخطأ

      حذف
  7. شكرا لك اخي موضوع جميل و اكثر من رائع اتمنى زيارة مدونتي و ترك تعليقك و شكرا لك
    http://www.arabic-dev.com/

    ردحذف
  8. شكراً لكم وللمبدع
    أريد رأيكم http://ma3loumatoday.blogspot.com/

    ردحذف
  9. سلام عليكم اخي كيف اقوم بتغير عبارة جاري بحت و ايضا نتائج بحت بالغة الانجلزية

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هذه العبارات أخي لا يمكن تغييرها إلا بتعديل ملفات الجافا وهذا امر لا ينفع شرحه فهو يتطلب تحميل ملفات الجافا ثم تغييرها ثم اعادة رفعها
      كل تلك الخطوات شرحها لا ينفع

      حذف
  10. اخي ممكن طريقة عمل زر معاينة مثل الموجود عندك

    ردحذف
    الردود
    1. تفضل راجع هذه المواضيع ستفيدك
      http://cnmu.blogspot.com/2013/04/Create-CSS-Buttons.html
      http://cnmu.blogspot.com/2015/04/view-and-download-counter.html

      حذف
  11. شكرا اخي الاضافة تعمل لكن لدي مشكلة انا من سوريا وموقع google code محجوب عنا وانت رافع اكواد ajax عليه عندما اقوم بتفعيل الهوت سبوت شيلد تظهر القائمة وعند ايقافه لا تظهر تقنية ajax هل من الممكن حل لهذه المشكلة لان مدونتي سورية واغلب زوارها من سوريا وانا احببت هذه القائمة كثيرا

    ردحذف
    الردود
    1. يمكنك حل المشكلة ببساطة
      انت بالتأكيد يمكنك فتح روابط الملفات مع تشيل برامج الغاء الحجب
      افتح اى ملف تريد وانسخ ما بداخلة
      ثم اضف ما يداخله بين هذه الاوسام
      <script type='text/javascript'>
      //<![CDATA[
      هنا
      //]]>
      </script>
      واضفه بشكل طبيعي في مدونتك حينا سيصبح الكود داخل المدونة طبعا هذا يزيد من حجم القالب لكنه حل جيد

      حذف
    2. أول شكرا على الرد السريع منك . ثانيا أتشكرك من كل قلبي لانك افدتني ونجحت معي الاضافة كتر الله خيرك

      حذف
  12. لو سمحت اخى عمرو انا مش القائمة انا عاوز اعمل مربع بحث يبحث فى نفس الصفحة كما فى النافبار بس انا عندى مربع بحث بhtml,css,jquery انا صممته بس اريده ان يبحث فى نفس الصفحة

    ردحذف
    الردود
    1. هذا النوع من البرمجيات ليس مجالي اخي الكريم
      وطبيعي مرفق في جميع المتصفحات بحث في الصفحة بـ CTRL+F
      لماذا تثقل موقعك باكواد لأمر موجود في المتصفحات ؟
      لالا انصحك بعمل هذا الامر
      وعموما بالتوفيق

      حذف
  13. شكرا اخى عمرو دائما لاتالق والنجاح مجالك وطريقك

    ردحذف
  14. السلام عليكم .. أنت إنسان تستحق الثناء بارك الله فيك يا إبني وزادك من علمه

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©