Помогнете за едно меню.

[proba]

Здравейте.
Имам едно меню което слиза надолу , но аз искам да се качва на горе.
Ако може да помогнете с преправянето на кода.

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="container">
<div id="button">
<img src="http://www.hv-designs.co.uk/tutorials/sliding_menu/images/button.png" width="184" height="32" class="menu_class" />
<ul class="the_menu">
<li><a href="#">Начало</a></li>
<li><a href="#">Начало2</a></li>
<li><a href="#">Начало3</a></li>
</ul>
</div>
</div>
</body>
</html>

jquey е просто библиотеката.
slider.js:

$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});

style.css:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#container {
margin: auto;
width: 490px;
}

#header {
background-repeat: no-repeat;
height: 42px;
width: 490px;
margin-bottom: 20px;
margin-right: 30px;
}

#button {
height: 32px;
width: 184px;
margin: auto;
}

ul, li {
margin:0;
padding:0;
list-style:none;
}

.menu_class {
border:1px solid #1c1c1c;
}

.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
top:50;
}

.the_menu li {
background-color: #302f2f;
}

.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}

.the_menu li a:hover {
padding:10px;
color: #3399ff;
}

Ето и как изглежда: Виж

Някой има ли идея кое да променя в кода за да може като се цъкне на бутона , менюто да се отваря отгоре над бутона , а не под него както е сега ???

 

[slideR]

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="container">
<ul class="the_menu">
<li><a href="#">Начало</a></li>
<li><a href="#">Начало2</a></li>
<li><a href="#">Начало3</a></li>
</ul>
<div id="button">
<img src="http://www.hv-designs.co.uk/tutorials/sliding_menu/images/button.png" width="184" height="32" class="menu_class" />
</div>
</div>
</body>
</html>

Така ???

 

[proba]

Не..Така менюто пак слзиа надолу , само че и бутона слзиа надолу.
Нещо по javascript-a e , но незнам какво защото ен разбирам js...

 

[taxi]

п.с. Сега видях ,че искаш да се качва нагоре..Аз си викам да го спрем да Слайдва изобщо.. :roll:

Не знам ,защо си изтри мнението..Ама ако не си го видял..

slideToggle във slideUp.

 

[marian]

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="container">
<div id="button">
<ul class="the_menu">
<li><a href="#">Начало</a></li>
<li><a href="#">Начало2</a></li>
<li><a href="#">Начало3</a></li>
</ul>
<img src="http://www.hv-designs.co.uk/tutorials/sliding_menu/images/button.png" width="184" height="32" class="menu_class" />
</div>
</div>
</body>
</html>

css:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#container {
margin: auto;
height:250px;
width: 490px;
position:relative;
}

#header {
background-repeat: no-repeat;
height: 42px;
width: 490px;
margin-bottom: 20px;
margin-right: 30px;
}

#button {
width: 184px;
margin: auto;
position:absolute;
bottom:0;
}

ul, li {
margin:0;
padding:0;
list-style:none;
}

.menu_class {
border:1px solid #1c1c1c;
}

.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
}

.the_menu li {
background-color: #302f2f;
}

.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}

.the_menu li a:hover {
padding:10px;
color: #3399ff;
}

Просто променяш височината на #container, за да се вижда менюто.
Така е добре само, че като сложиш нещо друго незнам как ще стане. Има шанс дори дизайна да ти се размести.
Друг начин не намерих, затова се опитай да го оправиш така.