كود الماسكي لإخفاء رقم الهاتف عند الاتصال بأي شخص

كود قائمة منسدلة احترافية متجاوبة مع جميع الاجهزة باستخدام css و html و jquery. هناك العديد من أشكال لقوائم منسدلة وكل واحدة تتميز عن الاخرى، وفي مدونتنا كنا قد قدمنا لكم اشكال عديدة منها متجاوب ومنها ماهو غير متجاوب، لكن اليوم توجد معنا قائمة احترافية بأتم معنى الكلمة كما انها متجاوبة ومتناسقة، حتى لا اطيل عليك تابع معي الشرح تركيب.

كيفية تركيب القائمة:

- اولا اليك رابط لمعاينة القائمة.

- لتركيب اتجه الى لوحة تحكم مدونتك ثم المظهر بعدها تحرير html وابحث عن الوسم التالي.

</b:skin>

عند ايجاده ضع فوقه الكود التالي.

.animenu__toggle{display:none;cursor:pointer;background:#111;border:0;padding:10px;height:40px;width:40px}

.animenu__toggle:hover{background:#0186ba}

.animenu__toggle__bar{display:block;width:20px;height:2px;background:#fff;transition:0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55)}

.animenu__toggle__bar+.animenu__toggle__bar{margin-top:4px}

.animenu__toggle--active .animenu__toggle__bar{margin:0;position:absolute}

.animenu__toggle--active .animenu__toggle__bar:nth-child(1){-webkit-transform:rotate(45deg);transform:rotate(45deg)}

.animenu__toggle--active .animenu__toggle__bar:nth-child(2){opacity:0}

.animenu__toggle--active .animenu__toggle__bar:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}

.animenu{display:block}.animenu ul{padding:0;list-style:none;font:600 15px droid arabic kufi;}

.animenu li,.animenu a{display:inline-block;font-size:15px}

.animenu a{color:#aaa;text-decoration:none}

.animenu__nav{background-color:#111}

.animenu__nav>li{position:relative;border-right:1px solid #444}

.animenu__nav>li>a{padding:10px 30px;text-transform:uppercase}

.animenu__nav>li:hover>ul,.animenu__nav>li:focus-within>ul{opacity:1;visibility:visible;margin:0}

.animenu__nav>li:hover>a,.animenu__nav>li:focus-within>a{color:#fff}

.animenu__nav__hasDropdown:before{content:"";position:absolute;border:4px solid transparent;border-bottom:0;border-top-color:currentColor;top:50%;left:10px}

.animenu__nav__dropdown{min-width:100%;position:absolute;top:100%;left:0;z-index:1;opacity:0;visibility:hidden;margin:20px 0 0 0;background-color:#373737;transition:margin .15s, opacity .15s}

.animenu__nav__dropdown>li{width:100%;border-bottom:1px solid #515151}

.animenu__nav__dropdown>li:first-child>a:after{content:'';position:absolute;height:0;width:0;left:50%;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:inherit}

.animenu__nav__dropdown>li:last-child{border:0}

.animenu__nav__dropdown a{padding:10px;width:100%;border-color:#373737}

.animenu__nav__dropdown a:hover,.animenu__nav__dropdown a:focus-within{background-color:#0186ba;border-color:#0186ba;color:#fff}

@media screen and (max-width: 767px){

.animenu__toggle{display:inline-block}

.animenu__nav,.animenu__nav__dropdown{display:none}

.animenu__nav{margin:auto;}

.animenu__nav>li{width:100%;border-right:0;border-bottom:1px solid #515151}

.animenu__nav>li:last-child{border:0}

.animenu__nav>li:first-child>a:after{content:'';position:absolute;height:0;width:0;left:1em;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:inherit}

.animenu__nav>li>a{width:100%;padding:10px;border-color:#111;position:relative}

.animenu__nav a:hover{background-color:#0186ba;border-color:#0186ba;color:#fff}

.animenu__nav__dropdown{position:static;background-color:#373737;margin:0;transition:none;visibility:visible;opacity:1}

.animenu__nav__dropdown>li:first-child>a:after{content:none}

.animenu__nav__dropdown a{padding-left:20px;width:100%}}

.animenu__nav--open{display:block !important}

.animenu__nav--open .animenu__nav__dropdown{display:block}

- اعد البحث عن الوسم التالي.

</body>

بعد ايجاده ضع فوقه الكود التالي.

<script type='text/javascript'>

//<![CDATA[

(function(){

var animenuToggle = document.querySelector('.animenu__toggle'),

animenuNav    = document.querySelector('.animenu__nav'),

hasClass = function( elem, className ) {

return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );

},

toggleClass = function( elem, className ) {

var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';

if( hasClass(elem, className ) ) {

while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {

newClass = newClass.replace( ' ' + className + ' ' , ' ' );

}

elem.className = newClass.replace( /^\s+|\s+$/g, '' );

} else {

elem.className += ' ' + className;

}

},         

animenuToggleNav =  function (){     

toggleClass(animenuToggle, "animenu__toggle--active");

toggleClass(animenuNav, "animenu__nav--open");     

}

if (!animenuToggle.addEventListener) {

animenuToggle.attachEvent("onclick", animenuToggleNav);

}

else {

animenuToggle.addEventListener('click', animenuToggleNav);

}

})()

//]]>

</script>

- الان مع الكود مسؤول عن اظهار القائمة، ضعه في اي مكان تريده، في حال اردته اسفل الهيدر، ابحث عن الكود التالي.

<div id='content-wrapper'>

وضع اسفله الكود التالي.

<nav aria-label='Menu' class='animenu' role='navigation'>

<button class='animenu__toggle'>

 <span class='animenu__toggle__bar'></span>

 <span class='animenu__toggle__bar'></span>

 <span class='animenu__toggle__bar'></span>

</button>

<ul class='animenu__nav'>

<li><a href='#'>الرئيسية</a></li>

<li><a aria-haspopup='true' class='animenu__nav__hasDropdown' href='#'>ارشيف</a>

<ul aria-label='submenu' class='animenu__nav__dropdown'>

<li><a href='#' role='menuitem'>منسدلة 1</a></li>

<li><a href='#' role='menuitem'>منسدلة 2</a></li>

<li><a href='#' role='menuitem'>منسدلة 3</a></li></ul></li>

<li><a aria-haspopup='true' class='animenu__nav__hasDropdown' href='#'>اقسام</a>

<ul aria-label='submenu' class='animenu__nav__dropdown'>

<li><a href='#' role='menuitem'>منسدلة 1</a></li>

<li><a href='#' role='menuitem'>منسدلة 2</a></li>

<li><a href='#' role='menuitem'>منسدلة 3</a></li></ul></li>

<li><a href='#'>عن موقع</a></li>

<li><a href='#'>اتصل بنا</a></li>

</ul>

</nav>

قم بتغيير الروابط وتسميات بما يناسبك واضغط على حفظ وشاهد النتيحة.