Používam bootstrap.
Kód:
<section class="admin" id="admin">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Administrácia</h2>
<h3 class="section-subheading text-muted">Ste prihlásený ako <strong><?php echo $login_session; ?></strong></h3>
<div class="uprava" id="corobime1" style="display:none;">
<ul class="nav nav-pills nav-stacked text-left">
<li class="active"><a onclick="showCoRobime1();" href="#corobime1">Článok 1</a></li>
<li><a onclick="showCoRobime2();" href="#corobime2">Článok 2</a></li>
<li><a onclick="showCoRobime3();" href="#corobime3">Článok 3</a></li>
</ul>
<form class="form-horizontal" method="post">
<h3>Úprava článku - Čo robíme (1)</h3>
<input name="nazov" class="form-control col-centered" type="text" value="<?php include 'editor.php'; echo $row['Nazov']; ?>"><br><textarea class="form-control col-centered" rows="5" cols="60" name="text"><?php include 'editor.php'; echo $row['Text'];?></textarea>
<button type="submit" class="btn btn-default" name="upravit">Upraviť</button>
</form>
</div>
<div class="uprava" id="corobime2" style="display:none;">
<ul class="nav nav-pills nav-stacked text-left">
<li><a onclick="showCoRobime1();" href="#corobime1">Článok 1</a></li>
<li class="active"><a onclick="showCoRobime2();" href="#corobime2">Článok 2</a></li>
<li><a onclick="showCoRobime3();" href="#corobime3">Článok 3</a></li>
</ul>
<form class="form-horizontal" method="post">
<h3>Úprava článku - Čo robíme (2)</h3>
<input name="nazov2" class="form-control col-centered" type="text" value="<?php include 'editor2.php'; echo $row['Nazov']; ?>"><br><textarea class="form-control col-centered" rows="5" cols="60" name="text"><?php include 'editor2.php'; echo $row['Text'];?></textarea>
<button type="submit" class="btn btn-default" name="upravit2">Upraviť</button>
</form>
</div>
<div class="uprava" id="corobime3" style="display:none;">
<ul class="nav nav-pills nav-stacked text-left">
<li><a onclick="showCoRobime1();" href="#corobime1">Článok 1</a></li>
<li><a onclick="showCoRobime2();" href="#corobime2">Článok 2</a></li>
<li class="active"><a onclick="showCoRobime3();" href="#corobime3">Článok 3</a></li>
</ul>
<form class="form-horizontal" method="post">
<h3>Úprava článku - Čo robíme (3)</h3>
<input name="nazov3" class="form-control col-centered" type="text" value="<?php include 'editor3.php'; echo $row['Nazov']; ?>"><br><textarea class="form-control col-centered" rows="5" cols="60" name="text"><?php include 'editor3.php'; echo $row['Text'];?></textarea>
<button type="submit" class="btn btn-default" name="upravit3">Upraviť</button>
</form>
</div>
<div class="uprava" id="onas" style="display:none;">
<form class="form-horizontal" method="post">
<h3>Úprava článku - O nás</h3>
<textarea class="form-control col-centered" rows="5" cols="60" name="text"><?php include 'editor_onas.php'; echo $row['Text'];?></textarea>
<button type="submit" class="btn btn-default" name="upravit4">Upraviť</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script type='text/javascript'>
function showCoRobime1() {
document.getElementById('onas').style.display = "none";
document.getElementById('corobime2').style.display = "none";
document.getElementById('corobime3').style.display = "none";
document.getElementById('corobime1').style.display = "block";
}
function showCoRobime2() {
document.getElementById('onas').style.display = "none";
document.getElementById('corobime1').style.display = "none";
document.getElementById('corobime3').style.display = "none";
document.getElementById('corobime2').style.display = "block";
}
function showCoRobime3() {
document.getElementById('onas').style.display = "none";
document.getElementById('corobime1').style.display = "none";
document.getElementById('corobime2').style.display = "none";
document.getElementById('corobime3').style.display = "block";
}
function showOnas() {
document.getElementById('corobime1').style.display = "none";
document.getElementById('corobime2').style.display = "none";
document.getElementById('corobime3').style.display = "none";
document.getElementById('onas').style.display = "block";
}
</script>
// Spojený príspevok Sob 13.05.17 18:07Vyriešené. Stačilo pridať do css .nav-pills { position: absolute; }