How to make script do as left top menu on this website?

HTML & CSS
1

Problem
i need to design menu using html css like image website:

what i try to do as top left menu alsafwa

i need to do menu text color with orange when mouse refer

and when active item selected above line orange moved based on item selected on menu

if current page orange line above menu will be selected on case of current page active

menu
menu720×86 1.78 KB

menu above this actually i need to do

2

I think you are asking for something like this but not 100% sure.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0;
}
.nav {
	display:flex;
	border-top:1px solid #ccc;
	align-items:flex-start;
	flex-wrap:wrap;
}
.nav ul {
	padding: 0;
	margin:0;
	list-style: none;
	display:flex;
	flex:1 0 0;
}
.nav li {
	line-height:1.4;
	flex:1 0 0;
	background: #f2f2f2;
}
.nav a {
	display: inline-block;
	padding: 8px 25px;
	color: #000;
	text-decoration:none;
}
.nav a:hover, .nav a.active {
	color: orange;
	border-top:3px solid orange;
	padding-top:5px;
}
.logo {
	margin-left:auto;
	order:2;
}
.logo img {
	display:block;
	margin:auto;
	max-width:300px;
	width:100%;
	height:auto;
}
@media screen and (max-width:800px){
	.logo{order:0;flex:1 0 100%;margin:0;}
}
@media screen and (max-width:499px){
	.nav ul{flex-wrap:wrap;}
	.nav li{flex:1 0 100%;}
	.nav a{display:block;}
}

</style>
</head>

<body>
<h1>Testing</h1>
<nav class="nav">
  <div class="logo"><img  src="http://www.placehold.it/300x200" alt ="logo" width="300px" height="200px"> </div>
  <ul>
    <li><a class="active" href = "#">الرئيسيه </a> </li>
    <li><a href = "#">من نحن </a> </li>
    <li><a href ="#"> خدماتنا </a> </li>
    <li><a href ="#"> اعمالنا </a> </li>
    <li><a href ="#"> اخر الاخبار </a> </li>
    <li><a href ="#"> اتصل بنا </a> </li>
  </ul>
</nav>
</body>
</html>

It should get you close to what you want but obviously there will be more work to do.

3

thank you for reply
this is actually what i need

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.