ثلاثة قوائم جاهزة للإستعمال

ثلاثة قوائم جاهزة للإستعمال

يوجد الآن مشاهدة التعليقات : 7

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

السلام عليكم ورحمة الله تعالى وبركاته
قبل أن أدخل للموضوع وبهاته التدوينة سنفتتح قسم جديد خاص بملحقات الويب والقوالب يعني سنقدم لكم ملحقات جاهزة للإستخدام Css - Jquery - Html وكتدوينة أولى لهذا القسم سنقدم لكم قوائم أو ما يعرف بــ Menu تتضمن 3 قوائم بتصميم مميز ونظرة حلوة من التصميم المسطح إلى التصميم 2D، أيضا بقائمتيين توجد قوائم منسدلة ...



Css
/* Menu Dropdown */
  .cf:before,
  .cf:after {
      content: " ";
      display: table;
  }

  .cf:after {
      clear: both;
  }

  .cf {
      *zoom: 1;
  }

  .menu,
  .submenu {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .menu {   
   margin: 50px auto;
   width: 800px;   
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content; 
  }

  .menu > li {
   background: #34495e;
   float: left;
   position: relative;
   transform: skewX(25deg);
  }

  .menu a {
   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
  }  

  .menu li:hover {
   background: #e74c3c;
  }  

  .menu > li > a {
   transform: skewX(-25deg);
   padding: 1em 2em;
  }

  /* Dropdown */
  .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   transform: skewX(-25deg);
   transform-origin: left top;
  }

  .submenu li {
   background-color: #34495e;
   position: relative;
   overflow: hidden;  
  }      

  .submenu > li > a {
   padding: 1em 2em;   
  }

  .submenu > li::after {
   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;   
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
  }  

  .submenu > li:nth-child(odd){
   transform: skewX(-25deg) translateX(0);
  }

  .submenu > li:nth-child(odd) > a {
   transform: skewX(25deg);
  }

  .submenu > li:nth-child(odd)::after {
   right: -50%;
   transform: skewX(-25deg) rotate(3deg);
  }    

  .submenu > li:nth-child(even){
   transform: skewX(25deg) translateX(0);
  }

  .submenu > li:nth-child(even) > a {
   transform: skewX(-25deg);
  }

  .submenu > li:nth-child(even)::after {
   left: -50%;
   transform: skewX(25deg) rotate(3deg);
  }

  /* Show dropdown */
  .submenu,
  .submenu li {
   opacity: 0;
   visibility: hidden;   
  }

  .submenu li {
   transition: .2s ease transform;
  }

  .menu > li:hover .submenu,
  .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
  }  

  .menu > li:hover .submenu li:nth-child(even){
   transform: skewX(25deg) translateX(15px);   
  }

  .menu > li:hover .submenu li:nth-child(odd){
   transform: skewX(-25deg) translateX(-15px);   
  }
HTML
<ul class="menu cf">
    <li><a href="">Menu item</a></li>
    <li>
        <a href="">Menu item</a>
        <ul class="submenu">
            <li><a href="">Submenu item</a></li>
            <li><a href="">Submenu item</a></li>
            <li><a href="">Submenu item</a></li>
            <li><a href="">Submenu item</a></li>
        </ul>         
    </li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
</ul>
jQuery
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>


Css
nav ul{
  position:relative;
  list-style:none;
}
nav ul li{
  float:left;
}
nav ul li a{
  padding:25px 15px;
  background:#eee;
  color:#333;
  display:block;
  font-family: 'PT Sans', sans-serif;
  text-decoration:none;
}
.lamp{
  position:absolute;
  height:4px;
  background:#333;
  transition:all .3s linear;
}
.selected.active a,.active a{
  background:#00bfff !important;
  transition:all .3s linear;
  color:#fff;
}
HTML
<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li class='selected'><a href='#'>Articles</a></li>
    <li><a href='#'>Portfolio</a></li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Contact Us</a></li>
  <li class='lamp'></li>
  </ul>
</nav>
jQuery
<script type='text/javascript'>
//<![CDATA[
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
$('nav ul li').mouseenter(function(){
  $('nav ul li').removeClass('active');
  $(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
  });
$('nav ul li').mouseout(function(){
  $('nav ul li').removeClass('active');
  $('.selected').addClass('active');
  var currentleft=$('.selected').position().left;
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
});
//]]>
</script>



Css
 .nav a{
  text-decoration:none;
}
.nav{
  height:70px;
  background:#222;
  position:relative;
}
.nav>ul{
  position:relative;
  list-style:none;
  padding:0;
  margin:0;
}
.nav>ul>li>ul{
  position:absolute;
  left:0;
  padding:0;
  margin:0;
  list-style:none;
}
.nav>ul>li:hover>ul li a{
  opacity:1;
  height:50px;
   transition:all .3s linear;
}
.nav>ul>li>ul a{
  display:block;
  color:#222;
  width:150px;
  line-height:50px !important;
  font:700 14px 'pt sans',sans-serif;
  background:#eee;
  border-bottom:1px solid #ddd;
  text-align:center;
  padding:0 5px;
   height:0;
  overflow:hidden;
  opacity:0;
    transition:all .3s linear .2s;
}
.nav>ul>li{
  float:left;
  position:relative;
}
.nav>ul>li>a{
  padding:0 20px;
  color:#fff;
  display:block;
  line-height:70px !important;
  font:400 15px 'PT Sans', sans-serif;
  text-transform:uppercase;
  text-decoration:none;
}
.lamp span{
  display:block;
  height:4px;
  background:#ee6666;
  position: relative;
}
.lamp span:after {
 bottom: 100%;
 left: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-color: rgba(238, 102, 102, 0);
 border-bottom-color: #ee6666;
 border-width: 4px;
 margin-left: -4px;
}
.lamp{
  position:absolute !important;
  height:4px;
  top:66px;
  background:#333;
  transition:all .3s linear;
}
.selected.active>a,.active>a{
  transition:all .3s linear;
  color:#fff;
}
HTML
<div class='nav'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Articles</a>
    <ul>
      <li><a href='#'>Tutorial</a></li>
      <li><a href='#'>Blogger</a></li>
      <li><a href='#'>Wordpress</a></li>
      <li><a href='#'>Design</a></li>
      <li><a href='#'>Psd</a></li>      
      </ul>
    </li>
    <li><a href='#'>Subscription</a>
        <ul>
      <li><a href='#'>Free</a></li>
      <li><a href='#'>Buy</a></li>
      <li><a href='#'>Silver</a></li>
      <li><a href='#'>Gold</a></li>
      </ul>
    </li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Contact Us</a></li>
    <li class='lamp'><span></span></li>
  </ul>
</div>
jQuery
<script type='text/javascript'>
//<![CDATA[
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
  $('.nav>ul>li').first().addClass('active');
  var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
$('.nav>ul>li').hover(function(){
  $('.nav ul li').removeClass('active');
  $(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
},function(){
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
  $('.nav>ul>li').first().addClass('active');
  var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
});
//]]>
</script>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 7 تعليقات:

  1. رائعة يا غالي لدي موقعي " www.ebda2.net " كيف يممكني استبدال الحالية بأحد هؤلاء الثلاثة :) . ؟

    شكراً لككككككككك <3

    ردحذف
    الردود
    1. للأسف تتطلب خبرة في التعامل بأكواد Css لتثبيتها بدون مشاكل
      يمكن تجربة وضع أكواد Css فوق ]]> وأكواد Html غيرها بالقائمة القديمة وضع الجديدة بدلها

      حذف
  2. Abdel Chafik3/08/2015

    كيفية تركيبها على القالب

    ردحذف
  3. أين نضع Js - Jquery
    وشكراااا

    ردحذف
  4. اخى ممكن تفلى ازاى اضع قائمة الاولة Css

    ردحذف
  5. غير معرف1/27/2017

    صديقه ممكن ان تشرح كيف يتم تثبيت الاضافه لوسمحت

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم