I'm sure that my problem is simple, but I have poor experience on designing in general.
I'm working on a simple PHP website project, and I have a navigation bar and want when click on one of the bars don't go to another page, rather just change a specified panel content according what the clicked button.
I think this could be done by using ajax and div but I think also there is a convenient and clear way to do that professionally.
Just ignore the unrelated lines or code, assuming that I want when click on one of the tab write a message of that tab or button without reloading.
My html file:
<?php
include('session.php');
?>
<html dir="rtl" lang="ar">
<head>
<title>Main view</title>
<link href="MainAdminStyle.css" rel="stylesheet" type="text/css">
<script src="myjavascript.js"></script>
</head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<body>
<img src="image/RightImage.jpg" style="width:100%; height: 200"/>
<div id="menu">
<ul>
<li><a href="index.html">bla</a></li>
<li><a href="aboutus.html">bla1</a></li>
<li><a href="services.html">bla2</a></li>
<li><a href="contactus.html">bla3</a></li>
</ul>
</div>
</body>
</html>
MainAdminStyle.css
#menu {
width: 800px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
I hope this helps:
<html>
<head>
<script>
function loadPage(url, into)
{
into = document.getElementById(into);
into.innerHTML = 'Loading...';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function()
{ into.innerHTML = xhr.response; }
xhr.send(null);
}
window.onload = function()
{
var menu = document.getElementById('menu');
var list = [].slice.call(menu.getElementsByTagName('a'));
list.forEach(function(link)
{
link.onclick = function()
{
loadPage(this.href, 'content');
return false;
};
});
};
</script>
<style>
.debug
{ border:1px solid #BADA55; }
</style>
</head>
<body>
<div id="menu" class="debug">
<ul>
<li><a href="index.html">bla</a></li>
<li><a href="aboutus.html">bla1</a></li>
<li><a href="services.html">bla2</a></li>
<li><a href="contactus.html">bla3</a></li>
</ul>
</div>
<div id="content" class="debug">
</div>
</body>
</html>
just copy & paste into a new file.html. edit it as you want ;)