Dropdown menu -arabic

Size
3,938 Kb
Views
8,096

How do I make an dropdown menu -arabic?

What is a dropdown menu -arabic? How do you make a dropdown menu -arabic? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.

Dropdown menu -arabic Previews

Dropdown menu -arabic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown menu -arabic</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>menu</title>
</head>
<header> <div class="container"> <div class="row"> <div class="col-md-12"> <ul id="menu" class="menu-list"> <li><a href="index.html">الرئيسية</a></li> <li><a href="order.html">خدماتنا</a> <ul class="sub-menu"> <li><a href="">الخدمة 1</a></li> <li><a href="">الخدمة 2</a></li> <li><a href="">الخدمة 3</a> <ul class="sub-menu"> <li><a href="">الخدمة 1</a></li> <li><a href="">الخدمة 2</a></li> <li><a href="">الخدمة 3</a></li> <li><a href="">الخدمة 4</a></li> </ul> </li> <li><a href="">الخدمة 4</a></li> </ul> </li> <li><a href="client.html">مميزاتنا</a></li> <li><a href="contact.html">مدونة</a></li> <li><a href="contact.html">مشارعنا</a> <ul class="sub-menu"> <li><a href="">مدونة 1</a></li> <li><a href="">مدونة 2</a></li> <li><a href="">مدونة 3</a></li> <li><a href="">مدونة 4</a></li> </ul> </li> <li><a href="contact.html">معرضنا</a></li> <li><a href="contact.html">اتصل بنا</a></li> </ul> </div> <!-- end column --> </div> <!-- end row --> </div> <!-- end container --> </header> <!-- end header -->
<h1 class="text-center"> قم بعمل هوفر على كلمة خدماتنا <span>ثم على الخدمة 3</span</h1> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dropdown menu -arabic - Script Codes CSS Codes

/* * Droid Arabic Kufi (Arabic) https://www.google.com/fonts/earlyaccess */
@font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot); src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format("embedded-opentype"), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format("truetype");
}
@font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot); src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format("embedded-opentype"), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format("truetype");
}
body { direction: rtl; font-family: 'Droid Arabic Kufi'; height: 1000px;
}
h1 { margin: 50px; font-size: 24px; color: #1b1f20; font-weight: 600;
}
span { display: block; margin: 20px; font-size: 16px; color: #1b1f20;
}
header { background-color: #ffcd23; box-shadow: 10px 0px 20px;
}
.menu-list { text-align: center; margin-top: 20px;
}
ul.menu-list > li { display: inline-block; margin-left: 45px; line-height: 30px; color: #fff !important; font-size: 18px; font-weight: bold; position: relative;
}
ul.menu-list > li a { color: #1b1f20; -webkit-transition: all 0.3s ease; font-weight: bolder; font-size: 20px;
}
ul.menu-list > li a:hover { color: #fff; text-decoration: none;
}
.menu-list li ul.sub-menu { display: none; position: absolute; margin: 0; padding: 0; width: 155px; z-index: 9999; top: 36px; list-style: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.menu-list li:hover ul.sub-menu { display: block;
}
.menu-list li ul.sub-menu li { border-bottom: 2px solid #1b1f20; background-color: #ffcd23;
}
.menu-list li ul.sub-menu li a { width: 100%; color: #1b1f20; padding: 8px; text-decoration: none;
}
.menu-list li ul.sub-menu li { padding: 10px; position: relative;
}
.menu-list li ul.sub-menu li a:hover { color: #fff; text-decoration: none;
}
.menu-list li ul.sub-menu:before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #FFF; content: ""; height: 0; right: 20px; position: absolute; top: -6px; width: 0;
}
.menu-list li ul.sub-menu li ul.sub-menu { position: absolute; left: 156px; top: 22px; display: none;
}
.menu-list li ul.sub-menu li:hover ul.sub-menu { display: block;
}
.menu-list li ul.sub-menu li ul.sub-menu:before { display: none;
}

Dropdown menu -arabic - Script Codes JS Codes

//========Animation For the Sub menu =============
//first sub menu
$(document).ready(function () {	$('ul.sub-menu').hide();	$('ul.menu-list > li').hover(function () {	$(this).find('> ul').stop().slideToggle(1000).css('display','block');
}); //sub sub menu	$('ul.sub-menu li ul.sub-menu').hide();	$('ul.menu-list ul.sub-menu li').hover(function () {	$(this).find('ul').stop().slideToggle(1000).css('display','block');
});
});
Dropdown menu -arabic - Script Codes
Dropdown menu -arabic - Script Codes
Home Page Home
Developer Mohammed Fawzy
Username mohammed-fawzy
Uploaded January 26, 2023
Rating 3
Size 3,938 Kb
Views 8,096
Do you need developer help for Dropdown menu -arabic?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mohammed Fawzy (mohammed-fawzy) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!