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



قبل أن أدخل للموضوع وبهاته التدوينة سنفتتح قسم جديد خاص بملحقات الويب والقوالب يعني سنقدم لكم ملحقات جاهزة للإستخدام 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😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
رائعة يا غالي لدي موقعي " www.ebda2.net " كيف يممكني استبدال الحالية بأحد هؤلاء الثلاثة :) . ؟
ردحذفشكراً لككككككككك <3
للأسف تتطلب خبرة في التعامل بأكواد Css لتثبيتها بدون مشاكل
حذفيمكن تجربة وضع أكواد Css فوق ]]> وأكواد Html غيرها بالقائمة القديمة وضع الجديدة بدلها
كيفية تركيبها على القالب
ردحذفأين نضع Js - Jquery
ردحذفوشكراااا
فوق </body>
حذفاخى ممكن تفلى ازاى اضع قائمة الاولة Css
ردحذفصديقه ممكن ان تشرح كيف يتم تثبيت الاضافه لوسمحت
ردحذف