Вот мое меню:
<ul class="menu">
<li><img src="#" title="???"/></li>
<li>Home<img src="#" title="Home"/></li>
<li>Forums<img src="#" title="Forums"/></li>
<li>Chat Rooms<img src="#" title="Chat Rooms"/></li>
<li>Messages<img src="#" title="Messages"/></li>
<li>Profile<img src="#" title="Profile"/></li>
<li>News<img src="#" title="News"/></li>
<li>Help/FAQ<img src="#" title="Help/FAQ"/></li>
</ul>
Вот мой CSS:
body
{
background-color: lightred;
padding: 0;
margin: 0;
}
.menu
{
position: relative;
top: 50px;
padding: 0;
margin: 0;
list-style: none;
}
.menu li
{
text-align: right;
border: 1px solid black;
border-left: 0;
padding: 0px;
margin: 0;
margin-top; 20px;
margin-bottom: 5px;
width: 235px;
position: relative;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
left: -195px;
font-size: 24px;
font-family: Trebuchet MS;
background-color: #EEE;
}
.menu li:hover
{
background-color: #DDD;
-webkit-box-shadow: 0px 0px 5px black;
-moz-box-shadow: 0px 0px 5px black;
box-shadow: 0px 0px 5px black;
}
.menu li img
{
position: relative;
top: 3px;
padding: 0 10px 0 5px;
margin: 0;
height: 25px;
width: 25px;
}
Вот моя страница:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('base_url');
?>/styles/main.css" />
<script type="text/javascript" src="<?php echo $this->config->item('base_url'); ?>/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('ul li').click(function()
{
$(this).slideToggle("slow");
}
}
</script>
</head>
<body>
<?php $this->load->view('menu'); ?>
</body>
</html>
В идеале, я хочу, чтобы мои пункты менювыдвиньте вправо, когда я нажимаю на него, затем сдвиньте влево, когда я нажимаю на что-то другое.Я просматривал эти сайты и выхожу пустым.
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions http://api.jquery.com/slideToggle/
Во-первых, я не уверен, нужно ли мне указывать идентификаторы пунктов списка или еслиЯ могу быть обобщенным об этом.Первоначально у меня был $ (. Menu li) .click (function () ... но это тоже не сработало. Я хочу, чтобы подобное меню сохраняло как можно больше места на экране. Я использую WAMP и CodeIgniterЯ полагаю, что обе являются самыми последними версиями, так как я загрузил их в течение последнего месяца. Мой jquery-1.6.2.js находится в той же папке, что и Application, System, Styles и User_Guide. Правильно ли у меня установлена ссылка на скрипт?«Я знаю, что Toggle может быть неправильным методом, как говорится на сайте learningjquery, чтобы использовать функцию animate и изменить свойство left для перехода справа налево, но я просто пробую его. Любая помощь приветствуется. Спасибо.