navbar with icon
الايقونات بواسطة material icons

html
<nav> <ul> <li><a class="link active" href="#"> <i class="material-icons">home</i> <span>الرئيسية</span> </a></li> <li><a class="link" href="#"> <i class="material-icons">bookmarks</i> <span>المدونة</span> </a></li> <li><a class="link" href="#"> <i class="material-icons">account_balance</i> <span>الدورات</span> </a></li> <li><a class="link" href="#"> <i class="material-icons">work</i> <span>اعمالنا</span> </a></li> <li><a class="link" href="#"> <i class="material-icons">mark_as_unread</i> <span>راسلنا</span> </a></li> </ul> </nav>
css
* { margin: 0; padding: 0; direction: rtl; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } body{ font-family: 'Cairo', sans-serif; font-weight: 100; background-color: #161616; width:100%; min-height: 100%; margin: 0; padding: 0; } nav { display: flex; align-items: center; justify-content: center; padding: 10px 100px; background-color: #fff; } nav ul { display: flex; align-items: center; justify-content: center; list-style: none; } nav ul li:not(:first-of-type) a { margin-right: 5px; } nav ul li a { text-decoration: none; display: block; padding: 15px 20px; font-size: 1.2rem; border-radius: 6px; color: #161616; transition: 0.5s ease; width: 100px; height: 40px; position: relative; overflow: hidden; } nav ul li a i { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); transition: 0.5s ease; color: #fff; } nav ul li a span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s ease; } nav ul li a.active { background-color: skyblue; } nav ul li a.active i { top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } nav ul li a.active span { top: 100%; left: 50%; transform: translate(-50%, 0); }
javascript
let links = document.querySelectorAll(".link"); function removeActive() { links.forEach(link => { link.classList.remove("active"); }); } links.forEach(link => { link.addEventListener('click', () => { removeActive(); link.classList.add("active"); }) });