Hi everyone,

 

i am trying to insert a neat drop down login box. i have downloaded some source code from this site:

http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/#

 

I now have a zip file containing a a css, Java Script sheet, images and an example html.

I am trying to insert this into a Wordpress theme and i have no idea what to do with the zip file.

 

If anyone can guide me through this i would be very grateful.

 

regards

 

Andermax

 

p.s I am very new to design and any additional tips would be appreciated.

Are you familiar with php and the wordpress set up? If not, I think you might find it easier to find a plugin written specifically for wordpress. Head on over to the cms forum and ask there; also do a search within the wordpress dashboard.

 

You can also try Theme My Login, last I used it (2 years ago) it was good but if you are specifically looking for toggle functionality it won't do.

Thanks for the info gadgetgirl.

Instead of using ul for your child (sub) menu, use a div. And assign a class to that div. Inside that div, put your login form there.

 

Essentially, you will have the following markup:

 

<ul>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">nav</a></li>
<li><a href="#">login hover</a>
<div class="nav_login_container">
<form>
<input>
<input>
<submit>
</form>
</div>
</li>
</ul>

 

As for your CSS, the absolute basics is:

li {position:relative;display:block;float:left;}
div.nav_login_container {position:absolute;top:0;left:0;display:none}

li:hover > div.nav_login_container {display:block;}

 

Then, you could use jQuery to spice it up a bit. Perhaps add a fadeIn/fadeOut, or slideDown/slideUp, or custom animation? Your choice.