Я в безумной ситуации.Я начинающий javascripter.(Вы можете сказать, что даже не новичок) Я пытаюсь сделать открытие меню (горизонтальное) по клику.Это будет 4 уровень.Я прошел второй уровень, выполнив поиск по Google и моим друзьям.Но я не могу взять на себя сейчас.Я знаю, что найду то, что мне нужно, в Google, но это занимает так много времени.Я все еще ищу это.Я как раз собираюсь стать javascripter для начинающих.
Я прошу открыть 4 уровня (4 столбца) и закрыть открытые уровни, щелкая где угодно.
И это такой хороший сайт, чтоесть много информации, которую я ищу.
Это мой index.html и мой css.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/screen.css?v=2011041201" type="text/css" media="screen,projection" />
<script src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sutun a").click(function(){});
$(".sutun a").live("click",function() {
$(this).parents("li").siblings().children().removeAttr("class");
//$(".sutun a").removeAttr("class");
$(this).addClass('secili');
//which level we in right ?
var level = parseInt($(this).parents(".sutun").attr("level"));
// maximum 4 levels right ?
if(level > 3){
//alert("Hobaa!!");
return false;
}
//removing levels right ?
$(".sutun").each(function(i, m){
if($(this).attr("level") > level ){
$(this).remove();
}
});
// opening column right ?
var yeni_sutun = $('<div class="sutun" level='+(level+1)+'></div>');
//choosing which data right ?
var s = $(this).attr("rel");
// adding data right ?
yeni_sutun.load("load"+s+".htm");
// adding dom to column right ?
$("#sutunkap").append(yeni_sutun);
});
});
</script>
<title>title what ?</title>
</head>
<body>
<div id="kap">
<div id="ust"></div>
<div id="logo"></div>
<div id="menu"></div>
<div id="icerik">
<div id="sutunkap">
<div class="sutun" level="1">
<ul>
<li><a href="javascript:;" rel="1">link1</a></li>
<li><a href="javascript:;" rel="2">link2</a></li>
<li><a href="javascript:;" rel="3">link3</a></li>
<li><a href="javascript:;" rel="4">link4</a></li>
<li><a href="javascript:;" rel="5">link5</a></li>
<li><a href="javascript:;" rel="6">link6</a></li>
<li><a href="javascript:;" rel="7">link7</a></li>
<li><a href="javascript:;" rel="8">link8</a></li>
<li><a href="javascript:;" rel="9">link9</a></li>
<li><a href="javascript:;" rel="10">link10</a></li>
<li><a href="javascript:;" rel="11">link11</a></li>
<li><a href="javascript:;" rel="12">link12</a></li>
</ul>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Вот мой css и cssreset.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
.cl {
clear:both;
}
body {
font: 62.5%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #000000;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
a:active, a:focus {
outline: none;
}
#kap {
width: 960px;
text-align:left;
margin:0 auto;
font-size:13px;
}
.sutun{
margin-top: 250px;
width: 265px;
float:left;
min-height:300px;
/*border:1px solid #c0c0c0;*/
}
.sutun li a{
background: #fafafa;
display:block;
text-decoration: none;
height:27px;
line-height:27px;
padding:2px 25px 2px 10px;
color: #009;
}
.sutun li a:hover{
font-weight: bold;
color: #006;
background: #d8d0ab url(../img/hover.gif) no-repeat bottom right;
}
ul a:focus, ul a.secili {
background: #e45f25 url(../img/hover.gif) no-repeat top right;
color: #fff;
}
ul a:focus:hover, ul a.secili {
background-image: #ffae00 url(.../img/hover.gif) no-repeat top right;
}
.sutun a: {
background-image: url(.../img/halka.png) no-repeat top left;
}
.backgr {
background:#dedede; display:inline
}
.secili {
background-image: url(../img/hover.gif);
}
и пример файла load1.htm
<ul>
<li><a href="javascript:;">jslink1</a></li>
<li><a href="javascript:;">jslink2</a></li>
<li><a href="javascript:;">jslink3</a></li>
<li><a href="javascript:;">jslink4</a></li>
<li><a href="javascript:;">jslink5</a></li>
<li><a href="javascript:;">jslink6</a></li>
<li><a href="javascript:;">jslink7</a></li>
</ul>