Change a drop down into a list for selecting category

JavaScript
, ,
1

i have a free classified website (http://xookr.in) which allows users to post free ads and in the add posting page it is having the drop down for selecting the category. the user have to select the parent category and then the child category. i want to make it user friendly like the locanto.in is having. it is showing the parent category as a list and when user clicks it than the child category is sliding out. please help me to change my drop down into a list.

if there is any jquery or javascript already exist to simply my task please tell me that also…

2

I looked at the second site you mentioned, but I couldn’t see the effect you describe. When I clicked on “Post free ad now!” I saw a list of main categories, but when I clicked on one of these, a secondary menu appeared, but nothing was animated. Is this what you mean?

3

yes i want to change my drop down similar to that one you can take a look at mine at my page to http://xookr.in/item/new

please help me to change it

4

That’s known as a fly out menu (kind of). Here a list of 10 fly-out menu plugins (with demos). Maybe something like that is what you’re looking for.

Otherwise, it wouldn’t be very hard to implement this yourself.

DEMO

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      ul{
        width: 150px;
        position: absolute;
      }

      li > ul{
        display: none;
        top: 0;
      }

      .selected{
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <ul id="nav">
      <li>
        <a href="#">Item 1</a>
        <ul>
          <li>Item 1a</li>
          <li>Item 1b</li>
          <li>Item 1c</li>
        </ul>
        </li>
      <li>
        <a href="#">Item 2</a>
        <ul>
          <li>Item 2a</li>
          <li>Item 2b</li>
          <li>Item 2c</li>
        </ul>
        </li>
    </ul>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $("#nav a").on("click", function(e){
        e.preventDefault();
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $("li > ul").hide();
        $(this).next().css("display", "inline-block");
      });
    </script>
  </body>
</html>

I’m assuming you’re using jQuery already. Otherwise it’s not really necessary for the snippet I provided.

5

will try to implement what you said…and reply the result…thank you sir.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.