Reduced Test Case For The More Semantic Construction Of Dropdown Arrows

In this example below you will see how to do a Reduced Test Case For The More Semantic Construction Of Dropdown Arrows with some HTML / CSS and Javascript

Reduced Test Case For The More Semantic Construction Of Dropdown Arrows.

Thumbnail
This awesome code was written by Wing-Hou Chan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Wing-Hou Chan ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Reduced Test Case For The More Semantic Construction Of Dropdown Arrows</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a>
<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

<a href="#" class="button split">Split Button <span data-dropdown="drop"></span></a>
<ul id="drop" class="f-dropdown" data-dropdown-content>
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li> <li><a href="#">Yet another</a></li>
</ul>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.foundation5.zurb.com/foundation.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/winghouchan/reduced-test-case-for-the-more-semantic-construction-of-dropdown-arrows-Hvrbk */
/* 30 */
*, *:before, *:after {
    -moz-box-sizing: border-box;
}

/* 38 */
body {
    color: #222;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    cursor: default;
}

/* 50*/
a:hover {
    cursor: pointer;
}

/* 1245 */
button, .button {
    border-style: solid;
    border-width: 0px;
    cursor: pointer;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif !important;
    font-weight: normal;
    line-height: normal;
    margin: 0px 0px 1.11111rem;
    position: relative;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: 0.88889rem 1.77778rem 0.94444rem;
    font-size: 0.88889rem;
    background-color: #008CBA;
    border-color: #007295;
    color: #FFF;
    transition: background-color 300ms ease-out 0s;
}

/* 1268 */
button:hover, button:focus, .button:hover, .button:focus {
    background-color: #007295;
}

/* 1270 */
button:hover, button:focus, .button:hover, .button:focus {
    color: #FFF;
}

/* 1664 */
.f-dropdown {
    position: absolute;
    left: -9999px;
    list-style: none outside none;
    margin-left: 0px;
    width: 100%;
    max-height: none;
    height: auto;
    background: none repeat scroll 0% 0% #FFF;
    border: 1px solid #CCC;
    font-size: 0.77778rem;
    z-index: 99;
    margin-top: 2px;
    max-width: 200px;
}

/* 1682 */
.f-dropdown:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-width: 6px;
    border-style: inset inset solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-color: transparent transparent #FFF;
    position: absolute;
    top: -12px;
    left: 10px;
    z-index: 99;
}

/* 1694 */
.f-dropdown:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-width: 7px;
    border-style: inset inset solid;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-color: transparent transparent #CCC;
    position: absolute;
    top: -14px;
    left: 9px;
    z-index: 98;
}

/* 1885 */
.dropdown.button, button.dropdown {
    position: relative;
    padding-right: 3.16667rem;
}

/* 1888 */
.dropdown.button:after, button.dropdown:after {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    border-style: solid;
    border-color: #FFF transparent transparent;
    top: 50%;
}

/* 1897 */
.dropdown.button:after, button.dropdown:after {
    border-width: 0.33333rem;
    right: 1.25rem;
    margin-top: -0.13889rem;
}

/* 1901 */
.dropdown.button:after, button.dropdown:after {
    border-color: #FFF transparent transparent;
}

/* 3079 */
.split.button span {
    display: block;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    border-left: 1px solid;
}

/* 3086 */
.split.button span:after {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    border-style: inset;
    top: 50%;
    left: 50%;
}

/* 3097 */
.split.button span {
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* 3099 */
.split.button span {
    width: 2.75rem;
}

/* 3101 */
.split.button span:after {
    border-top-style: solid;
    border-width: 0.33333rem;
    top: 48%;
    margin-left: -0.33333rem;
}

/* 3106 */
.split.button span:after {
    border-color: #FFF transparent transparent;
}

/* 3706 */
.split.button {
    position: relative;
    padding-right: 4.5rem;
}

/* 4056 */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0px;
    padding: 0px;
}

/* 4061 */
a {
    color: #008CBA;
    text-decoration: none;
    line-height: inherit;
}

/* 4065 */
a:hover, a:focus {
    color: #007BA0;
}

/* 4152 */
ul, ol, dl {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.11111rem;
    list-style-position: outside;
    font-family: inherit;
}

/* 4159 */
ul {
    margin-left: 1.1rem;
}

Comments