协助滑动菜单项

Question

这是我的菜单：

<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/

首先，我不确定是否需要提供列表项ID，或者是否可以通用。 最初我有$（。menu li）.click（function（）...，但是似乎也没有用。我想要这样的菜单，以尽可能地节省屏幕空间。我正在使用WAMP和CodeIgniter我相信这两个都是最新版本，因为我在上个月下载了它们。我的jquery-1.6.2.js与Application，System，Styles和User_Guide位于同一文件夹中。我的脚本链接正确吗？？我知道Toggle可能不是正确的方法，因为learningjquery网站说要使用animate函数，并将left属性更改为从右到左，但是我只是在尝试一下，感谢所有帮助。

Answer 1

这更接近：

http://jsfiddle.net/qPgjM/

首先需要纠正的是，您正在像这样构造jQuery：

$(document).ready(function()
{
}

但应该是这样的：

$(document).ready(function(){
});

（缺少右括号）

协助滑动菜单项

问题描述

1 个解决方案

解决方案1
0 已采纳 2011-08-03 18:35:07

协助滑动菜单项

问题描述

1 个解决方案

解决方案1 0 已采纳 2011-08-03 18:35:07

解决方案1
0 已采纳 2011-08-03 18:35:07