Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Sep 2012
    Posts
    2
    Member #
    33119
    Hey folks!
    Basically, i need help with one tiny thing.I have a menu with 4 links in it and a small email icon next to it.Here is the code
    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a> </li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    <img src="images/subscribe.png" width="22" height="22">

    Now, when user clicks on this icon, i would need to make one filed form (for email) to slide out (left from icon) and allow user to enter his email and click send.Also, that form should be able to close when clicked again on the icon.
    I know this is a lot of stuff, but is there somebody that could help?

    I think this is just a few lines of JS/jQuery, but i dont know it
    Can anyone help?

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    You're on the right track, you would need to use jquery to accomplish the "slide out", but you'll also need CSS for the styling.

    It's not a "copy / paste " answer either. The CSS styling part will be wholly dependant on the rest of the HTML and CSS in the page to get it right, then there will be a JavaScript function to call the event action.

  4. #3
    Junior Member
    Join Date
    Sep 2012
    Posts
    2
    Member #
    33119
    Webzarus, thanks a lot.I know, i would have to create separate div tag that would hold on the form.
    This is the CSS of the navigation bar:
    #navigation {
    clear: both;
    vertical-align: top;
    margin: 0px 0px 0px 25px;
    padding: 0px 0px 0px 0px;
    height: 35px;
    }

    Now, as i get it i would have to create separate DIV for form, like this
    <div id="slideform">
    <form>
    <input name="email" type="email" placeholder="Enter your e-mail...">
    <input name="submit" type="button" value="Send">
    </form>
    </div>

    Some CSS to set its width and height, but how to position it over the icon and make it slide out?
    I know im asking for too much help, but is there any way that you have 5 mins to help me?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com