locked
Use CSS Instead Jquery or javascript to bind the login menu RRS feed

  • Question

  • User-464009799 posted

    Hi All

    In my login menu which is depending on JQuery to bind the menu i am facing a lot of issues with it Query code as if i clicked on any button or hyperlink in the page and then click the <span> the menu doesn't appear. I am looking for a way to delete the JQuery and use CSS to show the login dropdown menu so i hope if some one can help me with it 

     <nav>
      <ul>
        <li id="login">
          <a id="login-trigger" href="#">
            Log in <span>▼</span>
          </a>
          <div id="login-content">
            
              <fieldset id="inputs">
                
                <asp:TextBox ID="txtUserName" runat="server" Width="225px" ></asp:TextBox>
              <br />
                    <asp:Label ID="wronglogusernamelbl" runat="server" ForeColor="#CC0000"></asp:Label>
                    <asp:TextBoxWatermarkExtender ID="usernamebxwatermark" runat="server" TargetControlID="txtUserName" WatermarkCssClass="watertext" 
                        WatermarkText="Your UserName" Enabled="True"></asp:TextBoxWatermarkExtender>
                       
                 <asp:TextBox ID="txtPassword" runat="server" Width="225px" TextMode="Password"></asp:TextBox>
               
    
             
                    <br />
                    <asp:Label ID="passwronglbl" runat="server" ForeColor="#CC0000"></asp:Label>
    
                      
              </fieldset>
              <fieldset>
              &nbsp;&nbsp;<asp:CheckBox ID="remecheckbox" runat="server" Text="Keep me signed in"></asp:CheckBox>
                <asp:Button ID="Loginbtn" runat="server" Text="Sign in" onclick="Loginbtn_Click" CssClass="submit" Width="70px" BackColor="#185aa5" CausesValidation="false"/>
               
              </fieldset><br />
              <asp:HyperLink ID="forgthylnk" runat="server" NavigateUrl="Password Recovery.aspx">Can not access your account?</asp:HyperLink>
            
          </div>                     
        </li>
        <li id="signup">
          <a href="Registration.aspx">Sign up</a>
        </li>
      </ul>
    </nav>

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      ;
      float: right;
      background: #eee;
      border-bottom: 1px solid #fff;
      border-radius: 3px;    
    }
    
    nav li {
      float: left;          
    }
    
    nav #login {
      border-right: 1px solid #ddd;
      box-shadow: 1px 0 0 #fff;  
    }
    
    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: #444;
      text-shadow: 0 1px 0 #fff; 
    }
    
    nav #signup a {
      border-radius: 0 3px 3px 0;
    }
    
    nav #login-trigger {
      border-radius: 3px 0 0 3px;
    }
    
    nav #login-trigger:hover,
    nav #login .active,
    nav #signup a:hover {
      background: #fff;
    }
    
    nav #login-content {
      display: none;
      ;
      top: 24px;
      right: 0;
      z-index: 999;    
      background: #fff;
      background-image: linear-gradient(top, #fff, #eee);  
      padding: 15px;
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-radius: 3px 0 3px 3px;
    }
    
    nav li #login-content {
      right: 0;
      width: 250px;  
    }
    
    /*--------------------*/
    
    #inputs input {
      background: #f1f1f1;
      padding: 6px 5px;
      margin: 0 0 5px 0;
      width: 238px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 1px #ccc inset;
    }
    
    #inputs input:focus {
      background-color: #fff;
      border-color: #e8c291;
      outline: none;
      box-shadow: 0 0 0 1px #e8c291 inset;
    }
    
    /*--------------------*/
    
    #login #actions {
      margin: 10px 0 0 0;
    }
    
    #login #submit {    
      background-color: #d14545;
      background-image: linear-gradient(top, #e97171, #d14545);
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      text-shadow: 0 1px 0 rgba(0,0,0,.5);
      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: linear-gradient(top, #d14545, #e97171);
    } 
    
    #login #submit:active {   
      outline: none;
      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 {
      ;
      top: 2px;
      right: 2px;
    }
    $(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;')
        })
    });
    



    Thursday, November 27, 2014 9:54 PM

Answers

  • User2103319870 posted

    AFAIK there is no click event you can emulate in css.  The closest you will get is :active but this will show you login content when you click and keeo holding the button.  

    One suggestion is to use the hover propety of css so instead of clicking you just need to hover the logic menu the submenu for login will display.

    Your Modified css:

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      ;
      float: right;
      background: #eee;
      border-bottom: 1px solid #fff;
      border-radius: 3px;    
    }
    
    nav li {
      float: left;          
    }
    
    nav #login {
      border-right: 1px solid #ddd;
      box-shadow: 1px 0 0 #fff;  
    }
    
    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: #444;
      text-shadow: 0 1px 0 #fff; 
    }
    
    nav #signup a {
      border-radius: 0 3px 3px 0;
    }
    
    nav #login-trigger {
      border-radius: 3px 0 0 3px;
    }
    
    
    nav #login-trigger:hover + #login-content
    {
      display: block !important;
    }
    
    nav #login .active,
    nav #signup a:hover {
      background: #fff;
    }
    
    nav #login-content:hover
    {
      display: block !important;
    }
    
    nav #login-content {
      display: none;
      ;
      top: 24px;
      right: 0;
      z-index: 999;    
      background: #fff;
      background-image: linear-gradient(top, #fff, #eee);  
      padding: 15px;
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-radius: 3px 0 3px 3px;
    }
    
    nav li #login-content {
      right: 0;
      width: 250px;  
    }
    
    /*--------------------*/
    
    #inputs input {
      background: #f1f1f1;
      padding: 6px 5px;
      margin: 0 0 5px 0;
      width: 238px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 1px #ccc inset;
    }
    
    #inputs input:focus {
      background-color: #fff;
      border-color: #e8c291;
      outline: none;
      box-shadow: 0 0 0 1px #e8c291 inset;
    }
    
    /*--------------------*/
    
    #login #actions {
      margin: 10px 0 0 0;
    }
    
    #login #submit {    
      background-color: #d14545;
      background-image: linear-gradient(top, #e97171, #d14545);
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      text-shadow: 0 1px 0 rgba(0,0,0,.5);
      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: linear-gradient(top, #d14545, #e97171);
    } 
    
    #login #submit:active {   
      outline: none;
      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 {
      ;
      top: 2px;
      right: 2px;
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 27, 2014 10:36 PM
  • User2103319870 posted

    only with internet explorer did not work as the hover doesnt work

    I just tested in IE10 and its working fine in my sample application. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 27, 2014 11:21 PM

All replies

  • User2103319870 posted

    AFAIK there is no click event you can emulate in css.  The closest you will get is :active but this will show you login content when you click and keeo holding the button.  

    One suggestion is to use the hover propety of css so instead of clicking you just need to hover the logic menu the submenu for login will display.

    Your Modified css:

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      ;
      float: right;
      background: #eee;
      border-bottom: 1px solid #fff;
      border-radius: 3px;    
    }
    
    nav li {
      float: left;          
    }
    
    nav #login {
      border-right: 1px solid #ddd;
      box-shadow: 1px 0 0 #fff;  
    }
    
    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: #444;
      text-shadow: 0 1px 0 #fff; 
    }
    
    nav #signup a {
      border-radius: 0 3px 3px 0;
    }
    
    nav #login-trigger {
      border-radius: 3px 0 0 3px;
    }
    
    
    nav #login-trigger:hover + #login-content
    {
      display: block !important;
    }
    
    nav #login .active,
    nav #signup a:hover {
      background: #fff;
    }
    
    nav #login-content:hover
    {
      display: block !important;
    }
    
    nav #login-content {
      display: none;
      ;
      top: 24px;
      right: 0;
      z-index: 999;    
      background: #fff;
      background-image: linear-gradient(top, #fff, #eee);  
      padding: 15px;
      box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
      border-radius: 3px 0 3px 3px;
    }
    
    nav li #login-content {
      right: 0;
      width: 250px;  
    }
    
    /*--------------------*/
    
    #inputs input {
      background: #f1f1f1;
      padding: 6px 5px;
      margin: 0 0 5px 0;
      width: 238px;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 1px #ccc inset;
    }
    
    #inputs input:focus {
      background-color: #fff;
      border-color: #e8c291;
      outline: none;
      box-shadow: 0 0 0 1px #e8c291 inset;
    }
    
    /*--------------------*/
    
    #login #actions {
      margin: 10px 0 0 0;
    }
    
    #login #submit {    
      background-color: #d14545;
      background-image: linear-gradient(top, #e97171, #d14545);
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      text-shadow: 0 1px 0 rgba(0,0,0,.5);
      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: linear-gradient(top, #d14545, #e97171);
    } 
    
    #login #submit:active {   
      outline: none;
      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 {
      ;
      top: 2px;
      right: 2px;
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 27, 2014 10:36 PM
  • User-464009799 posted

    Hi @A2H

    Many many thanks for your support its a good idea to use hover instead click in css if its not possible, your css update its working fine with all browser only with internet explorer did not work as the hover doesnt work :-(

    Thursday, November 27, 2014 10:54 PM
  • User2103319870 posted

    only with internet explorer did not work as the hover doesnt work

    I just tested in IE10 and its working fine in my sample application. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 27, 2014 11:21 PM