Username:
Password:

Hello Guest


If you want to join in our community , please register or login , you have in header a login form , or if you want to register ,press me .
  • Forum
  • Forum
  • Forum
  • Forum
  • Forum
  • fmSoftware is for sale , if you want to buy the forum and/or the old themes , jaques.gfx skype or roby_cs_reax@yahoo.com for EMAIL.

    You are not connected. Please login or register

    View previous topic View next topic Go down  Message [Page 1 of 1]

    Sasori

    Posts : 311
    Points : 1891
    Thanks : 5
    Administrator

    Hello world , in this tutorial I will show you a simple drop down example , the code is made by our member , Wanse and tutorial by me , ok , so lets start.
    The first part is too create some divs , 1 hide and 1 with the drop down so , we have that nice code :

    Code:
    <div class="dropdown">
            <input class="dropdown-toggle" type="text">
            <div class="dropdown-text">Options</div>
            <ul class="dropdown-content">
              <li><a href="#">Settings</a></li>
              <li><a href="#">Profile</a></li>
              <li><a href="#">Log Out</a></li>
            </ul>
          </div>

    Ok , now we need to have and some CSS , we will use the to add the CSS , the CSS look like that

    Code:
    <style>
      .dropdown {
          position: relative;
          display: inline-block;
          text-align: left;
          width: 132px;
        }

        .dropdown-text::-moz-selection,
        .dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
        .dropdown-text::selection,
        .dropdown-toggle::selection { background: transparent; color: inherit; }

        .dropdown-text {
          cursor: pointer;
          position: absolute;
          text-indent: 10px;
          line-height: 32px;
          background-color: #eee;
          border: 1px solid #ccc;
          border-radius: 3px;
          box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
          width: 100%;
        }

        .dropdown-text:after {
          position: absolute;
          right: 6px;
          top: 15px;
          content: '';
          width: 0px;
          height: 0px;
          border-style: solid;
          border-width: 5px 4px 0 4px;
          border-color: #555 transparent transparent transparent;
        }

        .dropdown-text,
        .dropdown-content a {
          color: #333;
          text-shadow: 0 1px #fff;
        }

        .dropdown-toggle {
          font-size: 0;
          z-index: 1;
          cursor: pointer;
          position: absolute;
          top: 0;
          border: none;
          padding: 0;
          margin: 0 0 0 1px;
          background: transparent;
          text-indent: -10px;
          height: 34px;
          width: 100%;
        }

        .dropdown-toggle:focus {
          outline: 0;
        }

        .dropdown-content {
          -webkit-transition: .25s ease;
          -moz-transition: .25s ease;
          -ms-transition: .25s ease;
          -o-transition: .25s ease;
          transition: .25s ease;
          list-style-type: none;
          position: absolute;
          top: 32px;
          padding: 0;
          margin: 0;
          opacity: 0;
          visibility:hidden;
          border-radius: 3px;
          text-indent: 10px;
          line-height: 32px;
          background-color: #eee;
          border: 1px solid #ccc;
          width: 140px;
        }

        .dropdown-content a {
          display: block;
        }

        .dropdown-content a:hover {
          background: #e8e8e8;
        }


        .dropdown-toggle:hover ~ .dropdown-text,
        .dropdown-toggle:focus ~ .dropdown-text {
          background-color: #e8e8e8;
        }

        .dropdown-toggle:focus ~ .dropdown-text {
          border-color: #c5c5c5;
          box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
          z-index: 2;
        }

        .dropdown-toggle:focus ~ .dropdown-text:after {
          border-width: 0 4px 5px 4px;
          border-color: transparent transparent #555 transparent;
        }

        .dropdown-content:hover,
        .dropdown-toggle:focus ~ .dropdown-content {
          opacity: 1;
          visibility:visible;
          top: 42px;
        }
    </style>

    And is done , this is  simple example , if you have problems or questions about that you can post in CSS Help Desk

    Preview : http://fmsoftware.quickbb.com/h1-

    Zyon

    Posts : 272
    Points : 1860
    Thanks : 2
    manager

    Link with example: http://fmsoftware.quickbb.com/h1-

    Thanks for share. :)

    View previous topic View next topic Back to top  Message [Page 1 of 1]

    Permissions in this forum:
    You cannot reply to topics in this forum