Home/ Questions/Q 6209813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:03:07+00:00

Here’s my menu: <ul class="menu"> <li><img src="#" title="???"/></li> <li>Home<img src="#" title="Home"/></li> <li>Forums<img src="#" title="Forums"/></li>

  • 0

Here’s my menu:

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

Here’s my 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;
}

Here’s my page:

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

Ideally, I want my menu items to slide out to the right when I click on it, then slide to the left when I click on something else. I’ve been looking at these sites and am coming up blank.

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
http://api.jquery.com/slideToggle/

First, I’m not sure if I need to give my list items ids or if I can be generic about it. Originally I had $(.menu li).click(function()... but that didn’t seem to work either. I want a menu like this to conserve screen space as much as possible. I’m using WAMP and CodeIgniter. I believe both are the most recent versions as I’ve downloaded them within the last month. My jquery-1.6.2.js is located in the same folder as Application, System, Styles and User_Guide. Do I have my script link right? I know Toggle might not be the right method as the learningjquery site says to use the animate function and change the left property to go right to left, but I’m just trying it out. Any and all help is appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is closer:

    http://jsfiddle.net/qPgjM/

    First thing that needed corrected is that you were structuring your jQuery like this:

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

    but it should be like this:

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

    (missing a right parenthesis)

    • 0