Drop Down JQuery Login Box for OSC to CSSv2

Install a drop down login box on OSC to CSSv2. Click the login link and a login box appears. If the user has javascript turned off, the link functions as normal. This mod also changes the text ‘login’ to ‘account’ once the user has signed in.

DEMO

click ‘login’ at top right.

If you are using OSC to CSS v2 (or v1) this is easy installation. No files or images to upload, just three easy steps.
Adapted from A Simple and Effective jQuery Dropdown Login Form. Visit this site for more detail and alternate drop down box styles.

1. open catalog/includesheader.php and change:
   <div class="topnav-login">
<?php
echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">Home</a>';
if (tep_session_is_registered('customer_id')) {
echo '<a href="'.tep_href_link(FILENAME_LOGOFF, '', 'SSL').'" >'. HEADER_TITLE_LOGOFF.'</a>';
}
echo '<a href="'.tep_href_link(FILENAME_ACCOUNT, '', 'SSL').'" >'. HEADER_TITLE_MY_ACCOUNT.'</a><a href="'.tep_href_link(FILENAME_SHOPPING_CART).'" >'.HEADER_TITLE_CART_CONTENTS.'</a><a href="'.tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL').'" >'.HEADER_TITLE_CHECKOUT.'</a>';
?>
</div>
   to:
   <div class="topnav-login">
<?php
echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">Home</a>';
if (tep_session_is_registered('customer_id')) {
echo '<a href="'.tep_href_link(FILENAME_LOGOFF, '', 'SSL').'" >'. HEADER_TITLE_LOGOFF.'</a>';
echo '<a href="'.tep_href_link(FILENAME_ACCOUNT, '', 'SSL').'" >'. HEADER_TITLE_MY_ACCOUNT.'</a>';
}else{
?>
<!-- LoginBox Starts Here-->
<div id="loginContainer">
<?php echo '<a href="'.tep_href_link(FILENAME_ACCOUNT, '', 'SSL'). ' " id="loginButton" class="topmenu"><span>Log in</span><em></em></a>';?>
<div style="clear:both"></div>
<div id="loginBox">
<?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'), 'post', 'id="loginForm"', true); ?>
<fieldset id="loginBody">
<fieldset>
<label for="email">Email Address</label>
<?php echo tep_draw_input_field('email_address',$login_email,'class="required email" id="email"'); ?>
</fieldset>
<fieldset>
<label for="password">Password</label>
<?php echo tep_draw_password_field('password','','id="password" ');?>
</fieldset><br/ >
<?php echo tep_image_submit('button_login.gif', IMAGE_BUTTON_LOGIN); ?>
</fieldset>
<span>
<?php echo '<br /><a href="' . tep_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '" class="button">Password forgotten?</a>'; ?>
</span>
</form>
</div>
</div>
<!-- LoginBox Ends Here -->
<?php
}
echo '<a href="'.tep_href_link(FILENAME_SHOPPING_CART).'" >'.HEADER_TITLE_CART_CONTENTS.'</a>
<a href="'.tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL').'" >'.HEADER_TITLE_CHECKOUT.'</a>';
?>
</div>
2. add this to your stylesheet:#loginContainer {
position:relative;
float:right;
}
#loginBox {
position:absolute;
top:28px;
right:0;
display:none;
z-index:29;
}
#loginForm {
width:210px;
border-radius:3px 0 3px 3px;
-moz-border-radius:3px 0 3px 3px;
background:#999999;
padding:6px;
}
fieldset#loginBody {
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
padding:10px 13px;
margin:0;
}
3. add this javascript snippet to catalog/includes/template_top.php just above the closing </head> tag.<script type="text/javascript">
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
</script>