Cómo crear un inicio de sesión y registro usando jQuery y CSS en asp.net

En este artículo voy a crear un ejemplo para el acceso y registro en un sitio web, que al hacer clic se desplegara en forma de menú, esto con jQuery y CSS en asp.net. El ejemplo lo puedes lo puedes descargar al final de este post.


 

En un artículo anterior mostré cómo crear un menú desplegable con jQuery y CSS, del mismo modo ahora mostrare como podrás abrir este menú, con la opción de entrar o registrarte en un sitio web. En este ejemplo la opción de registrarte solo se mostrara, tu tendrás que poner los campos que requieras. También puedes añadir más pestañas, es ampliamente utilizado en todos los principales sitios web debido a su aspecto innovador y facilidad.

Implementación: Vamos a crear una aplicación para ver el menú trabajando.

En primer lugar, crear una hoja de estilo para crear los  estilos para el menú desplegable que vamos a crear.

En la hoja de acceso.css pegue el siguiente código y guarda el archivo.

 nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;   
}

nav li {
  float: left;         
}

nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff; 
 background: #eee;
}

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444444;
  background:#eeeeee;
}

nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
   background: #eeeeee;
}

nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {

   background:#E7A34C;
   color:#ffffff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;   
  background: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
  background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
  background-image: -moz-linear-gradient(top, #E7A34C, #fff);
  background-image: -ms-linear-gradient(top, #E7A34C, #fff);
  background-image: -o-linear-gradient(top, #E7A34C, #fff);
  background-image: linear-gradient(top, #E7A34C, #fff); 
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}

nav li #login-content {
  right: 0;
  width: 280px; 
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login .submit {                              
  background-color: #3F80EC;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
  background-image: -webkit-linear-gradient(top, #f06015, #f88e11);

  background-image: -moz-linear-gradient(top, #f06015, #f88e11);
  background-image: -ms-linear-gradient(top, #f06015, #f88e11);
  background-image: -o-linear-gradient(top, #f06015, #f88e11);
  background-image: linear-gradient(top, #f06015, #f88e11);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login .submit:hover,
#login .submit:focus {                 
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
  background-image: -moz-linear-gradient(top, #f88e11, #f06015);
  background-image: -ms-linear-gradient(top, #f88e11, #f06015);
  background-image: -o-linear-gradient(top, #f88e11, #f06015);
  background-image: linear-gradient(top, #f88e11, #f06015);
}             

#login .submit:active {                
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;                              
}

#login .submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}

El código de la página debe quedar como sigue:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Login_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login jQuery y CSS con ASP.NEt</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="acceso.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#login-trigger').click(function () {
                $(this).next('#login-content').slideToggle();
                $(this).toggleClass('active');

                if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
                else $(this).find('span').html('&#x25BC;')
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <nav>
                <ul>
                    <li id="login">
                        <a id="login-trigger" href="#">Entrar<span>?</span>
                        </a>
                        <div id="login-content">

                            <fieldset id="inputs">
                                <asp:TextBox ID="txtUserName" runat="server" placeholder="Dirección Email" type="email" required></asp:TextBox>
                                <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="Password" required></asp:TextBox>
                            </fieldset>
                            <fieldset id="actions">
                                <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="submit"></asp:Button>
                                <asp:CheckBox ID="chkRemember" runat="server" Checked="true"></asp:CheckBox>Rocardar cuenta
                            </fieldset>
                            <a href="#" style="float: right;">Olvidaste tu contraseña?</a>
                        </div>

                    </li>
                    <li id="signup">
                        <a href="#">Sign up</a>
                    </li>
                </ul>
            </nav>
        </div>
    </form>
</body>
</html>

El ejemplo completo lo puedes descargar de la siguiente liga: https://github.com/jiestrada/Login

¿Qué te parece el ejemplo?, ¿Tienes alguna duda?, ¿Tienes comentarios?, Anímate escríbenos  cualquier comentario es bienvenido.

Saludos y excelente día

Artículos relacionados
49 Comentarios
  • uoqiwd Comentar
    Monday, October 19, 2015

    sdfsdf

  • nike air pas cher Comentar
    Sunday, February 21, 2016

    included per bag or scoop. One or two weeks cubic foot bags: 7.5/2=3.75 bags. Since 3.75 bags will not be purchased, we locate to 4 bags. For assorted

  • Billige Nike Air Max 95 Danmark Comentar
    Saturday, March 19, 2016

    Fantastic web site. A lot of helpful information here. I am sending it to several pals ans also sharing in delicious. And naturally, thank you in your sweat!

  • Tienda Online Calvin Klein Comentar
    Monday, March 21, 2016

    Generally I don't learn post on blogs, however I would like to say that this write-up very compelled me to check out and do it! Your writing taste has been amazed me. Thanks, very great post.

  • billige nike jordan aj1 Comentar
    Monday, March 21, 2016

    Hi, just wanted to mention, I liked this blog post. It was practical. Keep on posting!

  • fitflop clearance Comentar
    Monday, March 21, 2016

    I definitely wanted to develop a quick remark to be able to say thanks to you for all the precious secrets you are posting at this site. My time consuming internet search has at the end been compensated with pleasant facts to write about with my family members. I would repeat that we site visitors are very endowed to dwell in a perfect site with many perfect people with great tips and hints. I feel very fortunate to have used the website page and look forward to some more brilliant times reading here. Thanks again for all the details.

  • billige new balance orthotics inserts Comentar
    Monday, March 21, 2016

    We're a group of volunteers and starting a new scheme in our community. Your website offered us with valuable info to work on. You've done a formidable job and our whole community will be grateful to you.

  • ??? ??? ??? Comentar
    Monday, March 21, 2016

    What i don't understood is in fact how you are no longer really much more well-preferred than you may be right now. You are so intelligent. You know therefore significantly with regards to this matter, produced me personally imagine it from so many varied angles. Its like women and men are not fascinated unless it is something to accomplish with Woman gaga! Your individual stuffs great. At all times take care of it up!

  • boutique longchamp Comentar
    Monday, March 21, 2016

    Hello there, I discovered your blog by means of Google at the same time as searching for a related topic, your site got here up, it appears to be like good. I've bookmarked it in my google bookmarks.

  • Ropa Interior Calvin Klein China Comentar
    Tuesday, March 22, 2016

    You actually make it seem so easy with your presentation however I to find this topic to be actually something which I believe I might never understand. It seems too complex and extremely vast for me. I am taking a look ahead on your next put up, I?ll try to get the grasp of it!

  • billige nike jordan brand history glendale Comentar
    Tuesday, March 22, 2016

    Wow! This could be one particular of the most beneficial blogs We have ever arrive across on this subject. Actually Excellent. I am also a specialist in this topic therefore I can understand your hard work.

  • ??????? ???? Comentar
    Tuesday, March 22, 2016

    Hello. Great job. I did not expect this. This is a splendid story. Thanks!

  • zapatillas running asics hombre Comentar
    Tuesday, March 22, 2016

    Thanks for every other informative site. The place else could I get that type of information written in such a perfect approach? I've a project that I am simply now working on, and I have been on the look out for such information.

  • zapatillas asics trabuco Comentar
    Wednesday, March 23, 2016

    I'm extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the nice quality writing, it is rare to see a great blog like this one today..

  • billige nike jordan pictures and information Comentar
    Wednesday, March 23, 2016

    I'm still learning from you, as I'm trying to reach my goals. I certainly enjoy reading everything that is written on your website.Keep the aarticles coming. I enjoyed it!

  • cheap mike air max Comentar
    Wednesday, March 23, 2016

    Excellent, what a webpage it is! This weblog presents valuable information to us, keep it up.

  • Billige cheap Nike Air Max Comentar
    Wednesday, March 23, 2016

    It's the best time to make some plans for the future and it is time to be happy. I've read this post and if I could I desire to suggest you some interesting things or advice. Perhaps you can write next articles referring to this article. I wish to read more things about it!

  • ??? ????? ???? Comentar
    Wednesday, March 23, 2016

    Undeniably believe that which you stated. Your favorite justification seemed to be on the internet the easiest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they plainly don't know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side effect , people could take a signal. Will probably be back to get more. Thanks

  • fitflop boots sale Comentar
    Thursday, March 24, 2016

    What i don't understood is in fact how you're now not really much more smartly-favored than you may be right now. You're very intelligent. You understand therefore significantly relating to this matter, made me individually consider it from a lot of varied angles. Its like men and women don't seem to be interested unless it?s something to accomplish with Girl gaga! Your personal stuffs excellent. At all times handle it up!

  • billige new balance made in england Comentar
    Thursday, March 24, 2016

    I really appreciate this post. I?ve been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thanks again

  • billige nike jordan baby shower Comentar
    Thursday, March 24, 2016

    Awsome website! I am loving it!! Will be back later to read some more. I am bookmarking your feeds also

  • Billiga air max 90 dam billigt Comentar
    Thursday, March 24, 2016

    This info is worth everyone's attention. Where can I find out more?

  • Calvin Klein Store Comentar
    Friday, March 25, 2016

    I really appreciate this post. I?ve been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thank you again

  • ??? ?????? ?? Comentar
    Friday, March 25, 2016

    Hiya very cool web site!! Guy .. Excellent .. Wonderful .. I will bookmark your blog and take the feeds additionally?I am happy to find numerous helpful information right here within the submit, we need work out more strategies in this regard, thanks for sharing. . . . . .

  • mbt skor borlänge Comentar
    Friday, March 25, 2016

    Hi, just wanted to tell you, I loved this blog post. It was inspiring. Keep on posting!

  • Segunda Mano Nike Air Max Comentar
    Sunday, March 27, 2016

    I enjoy you because of your whole effort on this web site. Kim loves setting aside time for research and it's easy to see why. My spouse and i learn all of the dynamic mode you make invaluable guidance via your blog and in addition encourage participation from other people about this matter plus our own girl is actually starting to learn a whole lot. Enjoy the remaining portion of the year. You're doing a splendid job.

  • zapatillas vans old school Comentar
    Tuesday, April 5, 2016

    Thanks for sharing superb informations. Your site is so cool. I am impressed by the details that you?ve on this website. It reveals how nicely you understand this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found just the information I already searched all over the place and just could not come across. What a perfect website.

  • billige air jordan aqua 8s Comentar
    Saturday, April 9, 2016

    What's up, I just wanted to mention, I disagree. Your point doesn't make any sense.

  • ??? ????? ??? Comentar
    Monday, April 11, 2016

    Hello, Neat post. There's an issue along with your website in web explorer, might test this? IE still is the marketplace chief and a large component to other folks will omit your excellent writing because of this problem.

  • billige jordan shoes under 40 Comentar
    Tuesday, April 12, 2016

    Great write-up, I am normal visitor of one?s site, maintain up the excellent operate, and It is going to be a regular visitor for a lengthy time.

  • billige air jordan amazon package track Comentar
    Wednesday, April 13, 2016

    Great post. I was checking constantly this blog and I am impressed! Extremely helpful info specifically the last part :) I care for such info a lot. I was seeking this particular information for a very long time. Thank you and good luck.

  • billige jordan 11 og Comentar
    Thursday, April 14, 2016

    Hi, for all time i used to check webpage posts here in the early hours in the morning, since i enjoy to gain knowledge of more and more.

  • ralph lauren slim fit Comentar
    Thursday, April 14, 2016

    Usually I do not learn post on blogs, however I wish to say that this write-up very compelled me to check out and do so! Your writing style has been amazed me. Thanks, very great post.

  • mulberry online sverige Comentar
    Friday, April 15, 2016

    I needed to draft you one very small word to finally give many thanks once again on your gorgeous views you have shown at this time. It has been simply strangely generous of you giving unhampered precisely what a number of us could have distributed for an electronic book to help make some profit for themselves, specifically given that you might have tried it if you wanted. The concepts likewise served to become a good way to be aware that most people have a similar dream much like my personal own to see many more around this matter. I am certain there are numerous more fun moments in the future for individuals who see your blog post.

  • birkenstock styles Comentar
    Friday, April 15, 2016

    I actually wanted to type a simple message so as to say thanks to you for all the fantastic tips and hints you are posting at this site. My considerable internet look up has finally been honored with reliable information to go over with my neighbours. I 'd point out that many of us readers actually are very lucky to dwell in a remarkable site with so many special people with valuable opinions. I feel rather happy to have used your webpage and look forward to really more brilliant moments reading here. Thank you again for all the details.

  • höstjacka herr Comentar
    Saturday, April 16, 2016

    Hi there, I found your web site by means of Google whilst searching for a related topic, your site came up, it appears good. I've bookmarked it in my google bookmarks.

  • mulberry sverige Comentar
    Saturday, April 16, 2016

    Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how could we communicate?

  • mbt skor rea stockholm Comentar
    Saturday, April 16, 2016

    Definitely, what a splendid site and informative posts, I surely will bookmark your website.Have an awsome day!

  • ??? ???? ????? Comentar
    Sunday, April 17, 2016

    It is perfect time to make some plans for the future and it is time to be happy. I have read this post and if I could I want to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I want to read even more things about it!

  • Nike Air Max Rea billigt rea sverige Comentar
    Monday, April 18, 2016

    I would like to thank you for the efforts you have put in writing this web site. I am hoping the same high-grade website post from you in the upcoming as well. In fact your creative writing skills has inspired me to get my own blog now. Actually the blogging is spreading its wings rapidly. Your write up is a great example of it.

  • klänning barn Comentar
    Monday, April 18, 2016

    Hello, you used to write wonderful, but the last few posts have been kinda boring? I miss your great writings. Past few posts are just a bit out of track! come on!

  • billiga adidas kläder Comentar
    Tuesday, April 19, 2016

    I?ve been exploring for a bit for any high-quality articles or blog posts in this sort of area . Exploring in Yahoo I eventually stumbled upon this website. Studying this information So i am happy to convey that I have a very excellent uncanny feeling I came upon just what I needed. I such a lot definitely will make sure to don?t fail to remember this website and provides it a glance regularly.

  • nike pas cher femme Comentar
    Thursday, June 2, 2016

    precaution avoiding problems relating to the comic.

  • christian louboutin outlet Comentar
    Thursday, June 2, 2016

    you're in point of fact a excellent webmaster. The website loading velocity is incredible. It sort of feels that you're doing any unique trick. Moreover, The contents are masterwork. you've done a excellent job on this subject!

  • Sac gucci pas cher Comentar
    Monday, June 6, 2016

    and support healthy urinary function. Proprietary Herb Blend: Burdock (root), Milk Thistle (leaf), Nettle (leaf), Uva Ursi (leaf).

  • nike pas cher Comentar
    Sunday, June 12, 2016

    German prosecutors said Tuesday that they were ready to match Ullrich's DNA with blood found found in Operation Puerto, which introduced the 1997 Tour

  • porn movie Comentar
    Friday, July 15, 2016

    It is in reality a nice and helpful piece of information. I’m happy that you shared this helpful information with us. Please stay us up to date like this. Thanks for sharing.

  • ???539 Comentar
    Saturday, July 23, 2016

    Excellent post. I was checking constantly this blog and I'm impressed! Very useful information particularly the last part :) I care for such information much. I was seeking this certain information for a very long time. Thank you and best of luck.

  • Vanderpool Comentar
    Friday, May 4, 2018

    Your style is unique compared to other folks I have read stuff from. Thank you for posting when you've got the opportunity, Guess I'll just book mark this page.

Enviame un comentario