2
Мне нужно сделать прокручиваемое меню, в настоящее время я использую таблицу для создания кнопки и ее работу, как показано ниже.Как сделать прокручиваемую таблицу без сокращения столбца?
Я хочу кнопку, чтобы быть, как указано выше, и, когда я добавляю еще одну кнопку, я хочу, чтобы это было скрыто, и я могу использовать правую кнопку, чтобы показать кнопку справа, но скрыть одну кнопку на слева, но когда я добавляю кнопку вместо прокрутки, она сжимает мою кнопку и только перестает сокращаться после добавления еще одной кнопки 10 и только на этот раз левую и правую кнопки работать.
Что я ищу в том, что только 9 Кнопки в качестве первой кнопки изображения будет показана и остальные кнопки, что я буду добавлять нужно будет прокрутка с помощью правой кнопки.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#header {
border-style:solid;
border-color:skyblue;
height:105px;
}
#content {
border-style:solid;
border-color:skyblue;
min-height:300px;
margin-top : 3px;
margin-bottom : 3px;
}
#footer {
border-style: solid;
border-color: skyblue;
}
#tab {
display:block;
vertical-align:top;
margin-top:1%;
overflow:auto;
}
.pad {
height:70px;
width:82px;
padding:15px 15px 3px 15px;
text-align:center;
font-weight:bold;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
border:solid 1px;
border-radius: 2px 2px 2px 2px;
}
.pad:hover {
background-color: #4CAF50;
color: white;
}
.button_gmb {
height:40px;
width:48px;
margin-top:-10px;
}
.button_gmb:hover {
height:50px;
width:58px;
}
.next {
background-image:url('pictures/right.png');
position:absolute;
top:8%;
left:95%;
}
.previous {
position:absolute;
top:8%;
left:17%;
}
</style>
</head>
<body>
<script>
function scrollWinLeft() {
document.getElementById("a").scrollLeft += -60;
}
function scrollWinRight() {
document.getElementById("a").scrollLeft += 103;
}
</script>
<div id ="header">
<img ID ="Image1" src="pictures/logo_kolej.png" style = "margin-top:27px;margin-left:5px;width:180px"/>
<button class="previous" onclick="scrollWinLeft()"/>Left </button>
<div id = "a" style="position:absolute;top: 3%;left:18%; width:80%;height:50%">
<table border="0" id="tab" style="margin-top:-2px;margin-left:30px; overflow-y:scroll;" >
<tr>
<td class="pad"><a href="home.php?page=home"><img class="button_gmb" src="pictures/Home.png" /><br />Home</a></td>
<td class="pad"><a href="home.php?page=schedule"><img class="button_gmb" src="pictures/Efficient-Diary-logo.png"/><br />Schedule</a></td>
<td class="pad"><a href="home.php?page=finance"><img class="button_gmb" src="pictures/3-people-logo.png"><br />Finance</a></td>
<td class="pad"><a href="home.php?page=chat.php"><img class="button_gmb" src="pictures/Event.png"/><br />Chat</a></td>
<td class="pad"><a href="home.php?page=Gallery.php"><img class="button_gmb" src="pictures/Apps-Gallery-icon.png"/><br />Gallery</a></td>
<td class="pad"><a href="home.php?page=index.php"><img class="button_gmb" style="margin-right:18px;" src="pictures/logout.png"/><br />Logout</a></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
<td class="pad"><img class="button_gmb" src="pictures/time.png"/><br /></td>
</tr>
</table>
</div>
<button class="next" onclick="scrollWinRight()">Right</button>
</div>
<div id ="content">
<div style="margin-left:50px;margin-top:30px;margin-bottom:30px;margin-right:50px;">
<?php
if(isset($_GET['page'])) {
$page_name = $_GET['page'];
include("pages/".$page_name.".php");
}
?>
</div>
</div>
<div id ="footer">
<p style ="text-align:center;margin-top:3px;">2016 © Copyright Family Management System | All Rights Reserved </p>
</div>
Это мой первый проект, и я действительно не знаю, что делать.
Извините за поздний ответ, спасибо большое за код, не проверить его еще, я буду проверить его и сообщить вам результат. Еще раз спасибо, сэр .. – user5397881