Source
r/web_design•
kyleect

Is there a jquery plugin that does this better? Text drop down list (Not a menu)

On the following page, I created a quick mock up of what I've been looking for. Here's the issue with my example:

  1. It needs to be inline so it can be part of a sentence. Like.. Welcome to my blog, check out some of the [Categories]. Some more text after.

  2. When the box examples, it should overlap the content below rather than push it down.

http://kyleetilley.name/examples/catbox/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   	<title>Blog Design</title>

   	<script src="jquery.js" type="text/javascript"></script>

	   <script type="text/javascript">
   	$(document).ready(function(){
   		$(".catbox ul").hide();

	   	$(".catbox_toggle a").click(function()
	   	{
	   		$(this).parent().toggleClass("catbox_active");
	   		$(".catbox ul").slideToggle();
	   	});
   	});
   	</script>

   	<style>
   	.catbox
   	{
	   	width: 250px;
	   	border: 1px solid #000;
	   	padding: 5px;
	   	position: relative;
   		float: left;
   	}

   	.catbox ul
	   {
	   	margin: 0;
	   	padding: 0;
	   	list-style: none;
	   }
   	</style>
   </head>

   <body id="">
   	<h1></h1>

   	<div class="catbox">
   		<div class="catbox_toggle"><a href="#">Categories</a></div>
	   	<ul>
	   		<li><a href="#1">Link 1</a></li>
	   		<li><a href="#2">Link 2</a></li>
	   		<li><a href="#3">Link 3</a></li>
	   		<li><a href="#4">Link 4</a></li>
   		</ul>
   	</div>

   </body>
<html>

Optionally, if you tell me how to acomplish what I want to do with the code I have, that would be helpful too.

Posted Sep 26, 2009, 8:03 PM UTC · edited

416
qda•

why not just place the script in an absolute positioned div so that it's not inline with anything, hence not pushing it down..

edit: if you place an absolute position element inside of a relative one, you can make the parent (relative) one not change size when its content expands, and have the content expand with a z index higher than anything below it.. just a thought

7
Buckwheat469•

Something like this (I haven't tested this and I don't know if it reacts how you like, but the code should give you an idea). See this StackOverflow question for similar comments.

<script src="jquery.js" type="text/javascript"></script>

   <script type="text/javascript">
$(document).ready(function(){
    $(".catbox ul").hide();

    $("#categories").click(function()
    {
        //get the position of the placeholder element
        var pos = $("#categories").offset();  
        var width = $("#categories").width();
        $(".catbox").css( { "left": (pos.left + width) + "px", "top":(pos.top+15) + "px" } );

        $(".catbox").show();
        $(".catbox ul").slideToggle();
    });
});
</script>

<style>
.catbox
{
    width: 250px;
    border: 1px solid #000;
    padding: 5px;
    position: absolute;
    display:none;
}

.catbox ul
   {
    margin: 0;
    padding: 0;
    list-style: none;
   }
</style>
</head>
 <body>
<h1></h1>
<a id="categories" href="#">Categories</a>
<div class="catbox">
    <ul>
        <li><a href="#1">Link 1</a></li>
        <li><a href="#2">Link 2</a></li>
        <li><a href="#3">Link 3</a></li>
        <li><a href="#4">Link 4</a></li>
    </ul>
</div>

</body>
1
giveitago•

You should post this to stackoverflow

5
phrees•

I might be missing something, but why not just use a standard html select element for this?

5
[deleted]•

[deleted]

1
oddmanout•

Try jQuery Superfish (link goes to examples)

http://users.tpg.com.au/j_birch/plugins/superfish/#examples

It works with <ul><li>'s so all you have to do is style it with css so that it fits inline into a sentence like you want. You obviously won't have a whole list, it will just be 1 with a submenu.

<ul>
    <li>
         word
              <ul>
                   <li><a href="whatever1.html">menu item 1</a></li>
                   <li><a href="whatever2.html">menu item 2</a></li>
                   <li><a href="whatever3.html">menu item 3</a></li>
                   <li><a href="whatever4.html">menu item 4</a></li>
              </ul>
    </li>
</ul>
3
[deleted]•

[deleted]

2
[deleted]•

I'm not a jQuery guy, but this code is good enough to do what you want.

To have it overlap content and not push it down, you should position absolute. But remember, put that inside a relative positioned container so that it is relative to that container and not the browser window.

And of course, no need to run the $(".catbox ul") with ever click. Store that collection in a variable

var uls = $(".catbox ul");

and reference that variable when you want to take an action against that collection.

2
[deleted]•

[deleted]

1
[deleted]•

[deleted]

1
[deleted]•

[deleted]

1
[deleted]•

[deleted]

1
[deleted]•

[deleted]

1
[deleted]•

[deleted]

1
[deleted]•

Just a guess: try making the non-expanded by a div with display: inline-block, make the expanded be a div inside that div, with a higher z-index

-1
willmorgan•

inline-block breaks in IE

1
[deleted]•

It was "Just a guess"

0