Menu
Community /Pin to ProfileBookmark
Ifhttp://stats.hosting24.com/count.php is really PHP you need to use PHP include. The syntax you use is for Javascript.
Tables are outdated for desing purposes. I recommend using simple nested lists. You can arrange them horizontally by using CSS float:lefttnx u sir for that fault , i didt notice , the link u provide doesnt work just an empty website , could u give me a sample or link ? The link I just quoted from the page you posted. You try to include it by HTML.
http://jsfiddle.net/Sempervivum/jbn69128/1/ tnx u sir that was all i need . will study this script change still and all i need to fit my website . tnxu so much You're welcome. Will you need a third level/column with options as in your example? http://newproject.comli.com/step1.php
hare is my code :
and css
that works thank u so much . u solve all my problems hare rly helpful
HTML Categories list
Hello guys i am trying to do something like this 
[img]
its a categories list and usually there is just first panel and if u press one of the item on the first penel then come the second and third , and result on the second all the time is depends on what u select from the first one . you can try it hare [url]http://www.skelbiu.lt/naujas-skelbimas/[url]http://newproject.comli.com/step1.php
Sign in
to post a comment9 Comments(s) ↴
0
@SempervivumNov 10.2015 — #Your HTML is faulty: Doctype and head twice.If
Tables are outdated for desing purposes. I recommend using simple nested lists. You can arrange them horizontally by using CSS float:left
reply?
0
@yahoo5000authorNov 11.2015 — #reply?
0
@SempervivumNov 11.2015 — #reply?
0
@SempervivumNov 11.2015 — #I prepared an example for you with two levels:reply?
0
@yahoo5000authorNov 11.2015 — #reply?
0
@SempervivumNov 11.2015 — #reply?
0
@yahoo5000authorNov 11.2015 — #i use your method but got everyting not i was expected everything is messed up hare is my code :
<?php
include_once 'common.php';
?>
<!DOCTYPE html>
<html lang="<?php echo $lang['LANG']; ?>">
<head>
<title><?php echo $lang['PAGE_TITLE']; ?></title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/ism-2.1.js"></script>
<script type="text/javascript">
$(".level2 > li").hide();
$(".level1 > li").on("click", function() {
idx = $(this).index();
$(".level2 > li").hide();
$(".level2 > li").eq(idx).show();
});
</script>
</head>
<body>
<div class="advtop">
</div>
<div id="topbar2">
<div id="lang">
<ul>
<li>
<a href="?lang=lt" ><img src="image/Lithuania.png" ></a>
</li>
<li>
<a href="?lang=en"><img src="image/United Kingdom.png" ></a>
</li>
</ul>
</div>
<div id="text">
<ul>
<li>
<a href="#" ><?php echo $lang['LOGIN']; ?> </a><span>|</span>
</li>
<li>
<a href="#" ><?php echo $lang['MYACC']; ?><span class="icn"> &bigtriangledown;</span></a>
<ul class="dropdown">
<li><a class="first" href="#"><?php echo $lang['FAV']; ?> (0)</a></li>
<li><a href="#"><?php echo $lang['ADS']; ?></a></li>
<li><a href="#"><?php echo $lang['DETAILS']; ?></a></li>
<li><a class="last" href="#"><?php echo $lang['REGISTER']; ?></a></li>
</ul>
</li>
</ul>
</div>
<div id="postadv">
<a href="#" ><?php echo $lang['POST']; ?></a>
</div>
</div>
<div id="logo2"><a href="index.php"><img src="image/logo.png"></a></div>
<div id="searchbox2">
<form class="form" action="search.php" method="get">
<input class="search-field" type="search" name="search" size="70" maxlength="50" placeholder="<?php echo $lang['SRC']; ?>" height="50">
<select class="categories" name="categories">
<option value="0" selected="selected"><?php echo $lang['ALLCAT']; ?></option>
<option value="1"><?php echo $lang['CAT1']; ?></option>
<option value="2"><?php echo $lang['CAT2']; ?></option>
<option value="3"><?php echo $lang['CAT3']; ?></option>
<option value="4"><?php echo $lang['CAT4']; ?></option>
<option value="5"><?php echo $lang['CAT5']; ?></option>
<option value="6"><?php echo $lang['CAT6']; ?></option>
<option value="7"><?php echo $lang['CAT7']; ?></option>
<option value="8"><?php echo $lang['CAT8']; ?></option>
<option value="9"><?php echo $lang['CAT9']; ?></option>
</select>
<input class="submit-button" type="submit" value="<?php echo $lang['SRCBTN']; ?>">
</form>
<a href="#" ><?php echo $lang['ADVSRC']; ?></a>
</div>
<div id="itemsCategLists">
<table width="100%">
<tr>
<td width="210">
<ul class="level1">
<li>
<span>Drabu&#382;iai, avalyn&#279;</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Paslaugos</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Kompiuterija</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Technika</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Komunikacijos</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Buitis</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Transportas</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Auginantiems vaikus</span>
<i class="fa fa-chevron-right"></i>
</li>
<li>
<span>Nekilnojamasis turtas</span>
<i class="fa fa-chevron-right"></i>
</li>
</ul>
<ul class="level2">
<li>
<ul class="level2list1">
<li><a href='#'><span><?php echo $lang['CAT1-1']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT1-2']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT1-3']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT1-4']; ?> </span></a></li>
</ul>
</li>
<li>
<ul class="level2list1">
<li><a href='#'><span><?php echo $lang['CAT2-1']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-2']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-3']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-4']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-5']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-6']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-7']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT2-8']; ?></span></a></li>
</ul>
</li>
<li>
<ul class="level2list1">
<li><a href='#'><span><?php echo $lang['CAT3-1']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-2']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-3']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-4']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-5']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-6']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-7']; ?></span></a></li>
<li><a href='#'><span><?php echo $lang['CAT3-8']; ?></span></a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr><td colspan="2"></td></tr>
</table>
</div>
<div class="footer2">
<div class="copy">
<ul>
<li>
<a href="#" ><?php echo $lang['TERMS']; ?></a>
</li>
<li>
<a href="#" ><?php echo $lang['CONTACT']; ?></a>
</li>
</ul>
<span style="font-size: 13px; color: black"><?php echo $lang['COPY']; ?></span>
</div>
</div>
</body>
</html>and css
<i>
</i>#itemsCategLists {
<i> </i> background-color: white;
<i> </i>position: relative;
<i> </i>width: 930px;
<i> </i>height: 350px;
<i> </i>left: 175px;
<i> </i>top: 20px;
<i> </i>border-radius: 4px;
<i> </i>border: 1px solid #1a171a;
<i> </i>padding-top: 40px;
<i> </i>padding-left: 70px;
<i> </i>-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}
#itemsCategLists ul {
border: 1px solid #f1f1f1;
height: 215px;
list-style-type: none;
margin: 0;
<i> </i>padding: 0;
<i> </i>width: 205px;
}
#itemsCategLists ul li {
border-bottom: 1px solid #f1f1f1;
color: #656565;
height: 23px;
line-height: 23px;
padding-left: 30px;
}
#itemsCategLists #list_2 li {
padding-left: 10px;
}
#itemsCategLists #list_2 li span {
width: 156px;
}
#itemsCategLists ul li:hover {
background-color: #f7f6f4;
cursor: pointer;
}
#itemsCategLists ul li span {
display: inline-block;
overflow: hidden;
<i> </i>white-space: nowrap;
<i> </i>width: 140px;
}
#itemsCategLists ul li i {
color: #656565;
display: inline-block;
font-size: 10px;
}
.fa-chevron-right::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
right: 0em;
position: relative;
top: 0.25em;
transform: rotate(45deg);
vertical-align: top;
width: 0.45em;
}
.level1 {float: left;}
.level2 {float: left;}reply?
0
@SempervivumNov 11.2015 — #The Javascript doesn't work. You need to include jQuery and perform the Javascript on document-ready:[CODE]<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(".level2 > li").hide();
$(".level1 > li").on("click", function() {
idx = $(this).index();
$(".level2 > li").hide();
$(".level2 > li").eq(idx).show();
});
});
</script>[/CODE]reply?
0
@yahoo5000authorNov 12.2015 — #reply?