Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML:
- <div class="component">
- <?php echo "<h2>$pagetitle</h2>"; ?>
- <!-- Start Nav Structure -->
- <button class="cn-button" id="cn-button">Menu</button>
- <div class="cn-wrapper" id="cn-wrapper">
- <ul>
- <li><a href="./test.php"><span><i class="fas fa-3x fa-hand-holding-usd"></i></span></a></li>
- <li><a href="#"><span><i class="fas fa-3x fa-users"></i></span></a></li>
- </ul>
- </div>
- <!-- End of Nav Structure -->
- </div>
- CSS:
- * {
- position: relative;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- list-style: none;
- }
- html,
- body {
- height: 100%;
- }
- body {
- background: #52be7f;
- color: #fff;
- }
- .component {
- position: relative;
- margin-bottom: 3em;
- height: 15em;
- background: rgba(0,0,0,0.05);
- font-family: 'Lato', Arial, sans-serif;
- }
- .component > h2 {
- position: absolute;
- overflow: hidden;
- width: 100%;
- text-align: center;
- text-transform: uppercase;
- white-space: nowrap;
- font-weight: 300;
- font-style: italic;
- font-size: 12em;
- opacity: 0.1;
- cursor: default;
- }
- .cn-button {
- position: absolute;
- top: 100%;
- left: 50%;
- z-index: 11;
- margin-top: -2.25em;
- margin-left: -2.25em;
- padding-top: 0em;
- width: 4.5em;
- height: 4.5em;
- border: none;
- border-radius: 50%;
- background: none;
- background-color: #fff;
- color: #52be7f;
- text-align: center;
- font-weight: 700;
- font-size: 1.5em;
- text-transform: uppercase;
- cursor: pointer;
- -webkit-backface-visibility: hidden;
- }
- .csstransforms .cn-wrapper {
- position: absolute;
- top: 100%;
- left: 50%;
- z-index: 10;
- margin-top: -13em;
- margin-left: -13.5em;
- width: 27em;
- height: 27em;
- border-radius: 50%;
- background: transparent;
- opacity: 0;
- -webkit-transition: all .3s ease 0.3s;
- -moz-transition: all .3s ease 0.3s;
- transition: all .3s ease 0.3s;
- -webkit-transform: scale(0.1);
- -ms-transform: scale(0.1);
- -moz-transform: scale(0.1);
- transform: scale(0.1);
- pointer-events: none;
- overflow: hidden;
- }
- /*cover to prevent extra space of anchors from being clickable*/
- .csstransforms .cn-wrapper:after{
- content:".";
- display:block;
- font-size:2em;
- width:6.2em;
- height:6.2em;
- position: absolute;
- left: 50%;
- margin-left: -3.1em;
- top:50%;
- margin-top: -3.1em;
- border-radius: 50%;
- z-index:10;
- color: transparent;
- }
- .csstransforms .opened-nav {
- border-radius: 50%;
- opacity: 1;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- transition: all .3s ease;
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- pointer-events: auto;
- }
- .csstransforms .cn-wrapper li {
- position: absolute;
- top: 50%;
- left: 50%;
- overflow: hidden;
- margin-top: -1.3em;
- margin-left: -10em;
- width: 10em;
- height: 10em;
- font-size: 1.5em;
- -webkit-transition: all .3s ease;
- -moz-transition: all .3s ease;
- transition: all .3s ease;
- -webkit-transform: rotate(76deg) skew(60deg);
- -moz-transform: rotate(76deg) skew(60deg);
- -ms-transform: rotate(76deg) skew(60deg);
- transform: rotate(76deg) skew(60deg);
- -webkit-transform-origin: 100% 100%;
- -moz-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- pointer-events: none;
- }
- .csstransforms .cn-wrapper li a {
- position: absolute;
- right: -7.25em;
- bottom: -7.25em;
- display: block;
- width: 14.5em;
- height: 14.5em;
- border-radius: 50%;
- background: #429a67;
- background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
- background: -moz-radial-gradient(transparent 35%, #429a67 35%);
- background: radial-gradient(transparent 35%, #429a67 35%);
- color: #fff;
- text-align: center;
- text-decoration: none;
- font-size: 1.2em;
- line-height: 2;
- -webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
- -moz-transform: skew(-60deg) rotate(-75deg) scale(1);
- -ms-transform: skew(-60deg) rotate(-75deg) scale(1);
- transform: skew(-60deg) rotate(-75deg) scale(1);
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- pointer-events: auto;
- }
- .csstransforms .cn-wrapper li a span {
- position: relative;
- top: 1.8em;
- display: block;
- font-size: .5em;
- font-weight: 700;
- text-transform: uppercase;
- }
- .csstransforms .cn-wrapper li a:hover,
- .csstransforms .cn-wrapper li a:active,
- .csstransforms .cn-wrapper li a:focus {
- background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
- background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
- background: radial-gradient(transparent 35%, #449e6a 35%);
- }
- .csstransforms .cn-wrapper li a:focus {
- position: fixed; /* fix the displacement bug in webkit browsers when using tab key */
- }
- .csstransforms .opened-nav li {
- -webkit-transition: all .3s ease .3s;
- -moz-transition: all .3s ease .3s;
- transition: all .3s ease .3s;
- }
- .csstransforms .opened-nav li:first-child {
- -webkit-transform: rotate(-20deg) skew(60deg);
- -moz-transform: rotate(-20deg) skew(60deg);
- -ms-transform: rotate(-20deg) skew(60deg);
- transform: rotate(-20deg) skew(60deg);
- }
- .csstransforms .opened-nav li:nth-child(2) {
- -webkit-transform: rotate(12deg) skew(60deg);
- -moz-transform: rotate(12deg) skew(60deg);
- -ms-transform: rotate(12deg) skew(60deg);
- transform: rotate(12deg) skew(60deg);
- }
- .csstransforms .opened-nav li:nth-child(3) {
- -webkit-transform: rotate(44deg) skew(60deg);
- -moz-transform: rotate(44deg) skew(60deg);
- -ms-transform: rotate(44deg) skew(60deg);
- transform: rotate(44deg) skew(60deg);
- }
- .csstransforms .opened-nav li:nth-child(4) {
- -webkit-transform: rotate(76deg) skew(60deg);
- -moz-transform: rotate(76deg) skew(60deg);
- -ms-transform: rotate(76deg) skew(60deg);
- transform: rotate(76deg) skew(60deg);
- }
- .csstransforms .opened-nav li:nth-child(5) {
- -webkit-transform: rotate(108deg) skew(60deg);
- -moz-transform: rotate(108deg) skew(60deg);
- -ms-transform: rotate(108deg) skew(60deg);
- transform: rotate(108deg) skew(60deg);
- }
- .csstransforms .opened-nav li:nth-child(6) {
- -webkit-transform: rotate(140deg) skew(60deg);
- -moz-transform: rotate(140deg) skew(60deg);
- -ms-transform: rotate(140deg) skew(60deg);
- transform: rotate(140deg) skew(60deg);
- }
- .csstransforms .opened-nav li:nth-child(7) {
- -webkit-transform: rotate(172deg) skew(60deg);
- -moz-transform: rotate(172deg) skew(60deg);
- -ms-transform: rotate(172deg) skew(60deg);
- transform: rotate(172deg) skew(60deg);
- }
- .no-csstransforms .cn-wrapper {
- overflow: hidden;
- margin: 10em auto;
- padding: .5em;
- text-align: center;
- }
- .no-csstransforms .cn-wrapper ul {
- display: inline-block;
- }
- .no-csstransforms .cn-wrapper li {
- float: left;
- width: 5em;
- height: 5em;
- background-color: #fff;
- text-align: center;
- font-size: 1em;
- line-height: 5em;
- }
- .no-csstransforms .cn-wrapper li a {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- text-decoration: none;
- }
- .no-csstransforms .cn-wrapper li a:hover,
- .no-csstransforms .cn-wrapper li a:active,
- .no-csstransforms .cn-wrapper li a:focus {
- background-color: #f8f8f8;
- }
- .no-csstransforms .cn-wrapper li.active a{
- background-color: #6F325C;
- color: #fff;
- }
- .no-csstransforms .cn-button {
- display: none;
- }
- @media only screen and (max-width: 620px) {
- .no-csstransforms li {
- width: 4em;
- height: 4em;
- line-height: 4em;
- }
- }
- @media only screen and (max-width: 500px) {
- .no-ccstransforms .cn-wrapper {
- padding: .5em;
- }
- .no-csstransforms .cn-wrapper li {
- width: 4em;
- height: 4em;
- font-size: .9em;
- line-height: 4em;
- }
- }
- @media only screen and (max-width: 480px) {
- .csstransforms .cn-wrapper {
- font-size: .68em;
- }
- .cn-button {
- font-size: 1em;
- }
- }
- @media only screen and (max-width:420px) {
- .no-csstransforms .cn-wrapper li {
- width: 100%;
- height: 3em;
- line-height: 3em;
- }
- }
- span.weak {
- font-weight: lighter;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement