Home » Blogs

haleystar's blog

Welcome to Haley Star!

Hey it's Holly here, also known in the web world as  Haley Star.  Why Haley Star?  Well at some point when registering for some site somewhere out there, all the holly names were gone so I chose one close, Haley.  I've also always liked that name, if I ever have a daughter I'll probably name her Haley.  The Star part is because I LOVE stars, I'd put them on everything if I could!  My favorite shape I guess, is that even a
tags:

Jquery Accordion menu with active states

View The Demo

I was recently given the task of creating an accordion type menu that would also have active states to allow for a changing icon based on what menu item you clicked on. I did some research and found there was in fact a Jquery accordion menu plugin. However, this tutorial doesn't use any plugins or extra "stuff". Just your standard Jquery.js file is all you need. If you're working on a Drupal6.x site you don't even need to worry about that as Drupal comes with Jquery now! :)

So let's get started! This is a pretty simple build all things considered! You achieve really great looking results with just a few lines of code. To prove it, here's our code: (this would be placed before the

</head> tag of an html file)
<script type="text/javascript" src="http://jquery.com/src/jquery.js">
</script>
<script type="text/javascript">
$(function(){
$("ul li ul.options").hide();
$("ul.options:not(:first)").hide();
$("a.click").click(function(){
$("ul li.menu-item").removeClass("active");
$(this).parent().addClass("active");
$("ul li.menu-item ul.options").slideUp("slow");
$(this).parent().children().slideDown("slow");
return false;
});
});
</script> <style type="text/css">
Not too shabby eh? Now take a look at the results.

To get this working really all you need to do is set up your list correctly. For our example we using a nested list. Looks like this:

<ul>
<li class="menu-item"><a class="click" href="/">Menu Item 1</a>
<ul class="options">
<li>option 1</li>
<li>option 2 is cool</li>
<li>option 3</li>
</ul>
</li>
</ul>
<ul>
<li class="menu-item"><a class="click" href="/">Menu Item 2</a>
<ul class="options">
<li>option 1</li>
<li>option 2</li>
<li>option 3 is da bomb</li>
</ul>
</li>
</ul>
<ul>
<li class="menu-item"><a class="click" href="/">Menu Item 3</a>
<ul class="options">
<li>option 1 isn't this fun!?</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
</ul>
The big thing to remember here is that you need a way to distinguish your parent lists from your child lists. So here we're using classes. The parent li items have a class of "menu-item" and the child ul's have a class of "options". You'll also want to distinguish between the links that are your parent menu items and if you have any links in your child lists.

This example isn't using links in the child lists but I went ahead and gave the parent links a class of "click" anyway. You can make your class names whatever you want, just be sure to change the jquery code to reflect your own class names or id's.

Once you get that working the rest is just CSS! Take a look at the Source Code of the Demo Page to see exactly what I did to get mine working and looking the way it does. Let me know if you have questions or comments!!!

tags:

Sometimes I feel like a failure.

About two weeks ago I came home from work and just started crying.  Do you ever do that?  Not normal crying, it was more like 'I can barely breathe and just made myself throw up over the sink from crying so hard' crying.  The kind where you bury your face in the pillow and just let it all out and your pillow turns black from your mascara and gets soggy from all your tears and drool and spittle.  I couldn't handle life anymore that day.  Living on your own is tough and I won't pretend that I handle it well all the time.  I have my days. 
tags:

VPBC Christmas Pageant

If you've been wondering what I've been up to lately.....


 

Saturdays & Peanut Butter Cookies

Get a load of these!  Fresh from the oven! mmmmmm


Hey, what else are you suppose to do on a lazy Saturday afternoon with no where to go and on one to hang out with?  I was having a sweet tooth attack and can't afford to go grocery shopping so I opted to make cookies instead of run to the store for some chocolate :)  Worth all twenty minutes :)


In other life news, I was checking out the barefoot-executive.com today and heard what sounded like a gunshot outside my apartment window. So I go to the window to see what's going on.  I see some kid trying to sneak out through our fence and then one of the guys in the apartment below me runs outside, phone in hand, and is yelling across the parking lot at this kid to "stop right there, I saw what you had!" OMG WHAT DID HE HAVE?

My eyeballs are glued to the window and the kids sticks his arms up out to his side and starts walking over to his guy all  bad-a like and they start talking.  I couldn't hear what they were saying.  The kid walks away after a few minutes and my neighbor goes back inside. 

Then later I hear more talking outside my window and the guy (my neighbor) was outside describing what had happened to a cop!  Eeeh he must have had a gun right?  So scary.  I don't like this whole living alone thing, but at least I have concerned neighbors who seem to care about what goes on around here. That makes me feel a little better.  Eh, wish Luka barked more... I'll have to train that.

Ok, back to munching on my cookies!
tags:
Syndicate content