Toolbar (Dribbble, CSS remix)

Developer
Size
10,426 Kb
Views
58,696

How do I make an toolbar (dribbble, css remix)?

What is a toolbar (dribbble, css remix)? How do you make a toolbar (dribbble, css remix)? This script and codes were developed by Carl Calderon on 30 July 2022, Saturday.

Toolbar (Dribbble, CSS remix) Previews

Toolbar (Dribbble, CSS remix) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toolbar (Dribbble, CSS remix)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li><a href="#home">Home</a></li> <li class="active"><a href="#like">Like</a></li> <li><a href="#chat">Chat</a></li> <li><a href="#help">Help</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Toolbar (Dribbble, CSS remix) - Script Codes CSS Codes

@font-face { font-family: 'fontello'; src: url("data:application/octet-stream;base64,d09GRgABAAAAAA4UABAAAAAAFcQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcYd7pbkdERUYAAAGIAAAAHQAAACAANAAET1MvMgAAAagAAABDAAAAVlZnYrxjbWFwAAAB7AAAAF0AAAFaAR0PaWN2dCAAAAJMAAAAGgAAACgJRQlDZnBnbQAAAmgAAAT8AAAJljD4npVnYXNwAAAHZAAAAAgAAAAIAAAAEGdseWYAAAdsAAADlgAABITJIxmqaGVhZAAACwQAAAAyAAAANv0MfH9oaGVhAAALOAAAAB4AAAAkB44DxGhtdHgAAAtYAAAAHAAAABwRZABjbG9jYQAAC3QAAAAQAAAAEALUBCJtYXhwAAALhAAAACAAAAAgAPYBOm5hbWUAAAukAAABsgAAAwnn6PmFcG9zdAAADVgAAAAhAAAAMP/6AMlwcmVwAAANfAAAAJUAAACVp7u/aHicY2BgYGQAguP/NtwH0Wc+yLjDaABbwAeUAAB4nGNgZGBg4ANiCQYQYGJgBEI2IGYB8xgABIwAOQAAAHicY2BkXsX4hYGVgYGpi2k3AwNDD4RmvM9gyMgEFGVgY2aAAUYGJBCQ5prC4MBgz5DDHPQ/iyGK2ZPBFqYGAAIICtMAeJxjYGBgZoBgGQZGBhAIAfIYwXwWBgsgzcXAwcAEhPYMyQwZDDn//wPF4Oz/R/4v/D/3/yyoXihgZGOACzAyAQkmBlTAyEAIMBNUwQB0HxCwAjEbEYrpDQBK4g6LAAAAeJxjYEADRgxGzJ5MP/8fZvYEYRgLAGmkCpMAAHicnVVpd9NGFJW8ZE/aksRQRNsxE6c0GpmwBQMuBCmyC+niQGgl6CInMV34A3zsZ/2ap9Ce04/8tN47XhJaek7bHEvvvpk7b9N7E3GMqOx5IK5RR0pe96Sy/lQq8bOkrutenijp9ZK6bKeekhZRK02VzMX9I7lEdS5WskmwScbrXqKeqzzvg9JLMqwoSyLaItrKvCxNU08cP021OL1kkKaBlIyCnUqjjxCqUS+Rqg5lSodevZ6KmwVSNhrxqKOiehAq7hzPOaWNOmCkcpXDXLFZbeR7Sdbz+o/SRKfY236cYMNj9CNXgVSMzMD2NB6HTyTT0V4iM5F/7LhOlIVSG1wAr2qwx6BK8aG48UG2E8jUeM3xdVGtNDIV57rPstksHY+VEOXB39ihlBu6v4Oz06aoVmNx+8AzBjkplCh6SBaADlOZp/YI2jy0QGaN+qPiHPB1CC+yEGUqz5Qs6FAHMmd295Ni2t1J12RxoF8GMm9295Ldx8NFr471Zbu+YApnMXqSFIuLEdyHMuunTLvUCEcZF3PAxTxe4ta0QsjIAoxKI8xRW/ie2ahrnB1jb3Qej9VTZNJF/N1Mfj04qVjhOMt6R9xInLvHruvCVSCLCKca7yeOLOpQZbD6+9KS6yw4YZhnxULFlxe+dxH5LzFuP5B3TOFSvmuKEuV7pihTnjFFhXIZhaVcMcUU5aoppilrppihPGuKWcpzRqb9f+n7ffg+hzPn4ZvSg2/KC/BN+QF8U34I35QfwTelgm/KOnxTXoRvSm3gbSlTEaqYsXT47SVataFqOTO4wD4PZM2I9kVvBNIwSnXVSSl1v6VV/iT566LHY+uTkro1aWyIu7pps/j4dMZvbl0y6oadq0+MI+WhPXT12DShU/vN4d/OXd0qLrmriGrDqDYimASANui3AvFN82w7EPOWXXz8QzAC1M+pNVRTde3UlRoP8ryruxie5MDjiGOgjeuursBLE1NWQ/PhZykyFfuDvKmVauewdflkWzWHNqTC2yL2lWScpu295FVJlZX3qrRePp+GIXp6FteEtmzdyaQSoVEzzvHwripF2ZGWctQ/QueXor4HnHF2QevDMe5E3UG1Nex0+PlmI2sLJoamtL0ToGQsXRVjUeVZnGN0DWsdb9wSnq6nJxbxKTaZj8JKdX2Uj24jzSt2WWbRqEp1dJf2WeyrNv0yO2hYHWc/aao27uphW40qUj1Vvga0B3ZW3fhQDys+6qBRVTXb6NrIYzQua8Z/DMhiXPnrRqsm0+/glmqnzWLNXUFz35gs904vb73JfivnppGm/1ajLSOX/RyO+W0R4N85KHZT1kC9NWmIcQHZCxgu1UTnDs3dxiDiOvsfndP9b83CIDmrbY3ZPPXh6ukokjtMeZxlm1nW9SjNUbSTxD5FYqvDicFNjeFYbsoGBuTuP6zfwz3griyLD7xtJIC4z9rEqJ7q4O4eVyM07Cu5DxiZY8e5DbAD4BLE5ti1Kx0Au9Il5w7AZ+QQPCCH4CE5BLvk3AT4nByCL8gh+JIcgq/IuQXQI4dgjxyCR+QQPCanDbBPDsETcgi+JofgG3JaAAk5BCk5BE/JIXhmZHNS5m+pyHWg7yy6AfS97RooW1B+MHJlws6oWHbfIrIPLCL10MjVCfWIiqUOLCL1uUWk/mjk2oT6ExVL/dkiUn+xiNQXxpeZgZTXei95Rwd/AjQbrH8AAQAB//8AD3iclZPLbxtVFIfPuXfm3pmx45nxY9w8bMczyThgJ3Fm7LFTO87kAW1wRJ0oz4pIqRqiCiEIq1KVJaISqoRYgSoVJJBQeKgqYo0qUVVdAIL/AJawyxahutxJEGxhc3Wke373aL7vDBAoAuCz5A5Q4PBM6AIAJUC3gSCSLhCClyRR4RIAZ7Ik2qgp62XfLJol33SKqP72+DG58+SwSHaiLBhPH9LnyB/iNQ9C+LZ7X+3thFMMZSpRWToEiVCJHKhIQOFEuQyUwpoIxhaAc1wHxDguDnfvayJVA0ZlyuRDkKPswX/L/t9hu7uhpSqdVrPujo/Zhfw5S/HUmVRSM8qBEYxaBhtNeXNYawTzGNRrbsl1bM4KaGW9Rgd9r+FZmTRPkBymLZ+nrRZG3WW0WcY4wc2Tk/6XP+oDPF2otqYKI1uBqlRR4yrJ03gskx+Ql0Y0ZmhsQ9c3mPYNbonAFyeYMIZSupIarrfqS7oaqLGWTBRi0GwypbOWNz7K1be4avR0lcE/3H8X3IswCztwOdxebtiUSs28QgltIZDNF85TLkuhImqZgKBKQZgmuyBHavkuSBKuCSaCDmNxtoiws7Xe67SrU+NObtjUoYhFNVFu2G69Jr68IUiIIvC9rJWNEDDOHLskzoble0FDsCr9DSuTFi08yP57cdafxygoQm5JRG8yLTaYVV4bi6/e+P7WGy+VMt3wYK3nTPT2Kt8t51/+xDXb/oXZSx9fbTcLPY3vDAwP3fxpYZu+sl/MKdnBWJJO7PUmnNt7Gpdjg5WJzhWntL96I/Q3Jmf2u6F9Tm6n+T3txaXc+HIwaVm7wfJCLVdpSu8qdGvlyvWMtXn06vqIPlEZjDFDSbeZAJR8+gN9j64AAx2mw4qmKiBBh6A4r4FEpWtMJpRi72yZOOc6182MaZo8VVbREf+Jg2aJm37dz+DP+ODoydUj8tGvvxwf0ZX+Yn8BH/S/xvfv3u2/fnwMYl7k8Z7waMM8eOE0R4laSCQSimHRNh/KGG0x4ukaExIni/Nzs82aN+nazCynamdCgjMxp5gTqCNGbtCNjDQiG9UCVsU+RzIiQ5zZZ7KMt6+3w3H/4mre+axjNdMZphKp/yhhmLH+QyXu55LrU8nEp7c//MAdShxX25XcgBuvdUeGPsc/33zHtbyLw7FbM8+vbeazLEZJ/1E8jm2eaF6YnD6/NKSfBufs4leTxTHDWHQGAP4C5Zm5JgAAeJxjYGRgYADilT1P98fz23xlkGd+ARRhOPNBxh1OC/w/zPyS2RPI5WBgAokCAHqsDNcAAHicY2BkYGD2/H+YIYr5JwMQML9kYGRABewAcTMEWgAAAWwAIQAAAAABTQAAA1QAEAP5ABADoAASA74AEAAAACgAKAAoAOQBkAHIAkIAAQAAAAcAWQADAAAAAAACABQAIgBsAAAAawC9AAAAAHicfVHNattAEP7WcYwLpfgJwmAoxIcVK8WG/FwMLjYEcukh12InkrVF0QZJTuL3yBPkAXrqNU+QW9+l935ab3MoxRKa+Wb229F8MwA+4QcUds8ERcAKffwMuIMe3gI+wGd1FHAXfXUd8CEu1e+Ae+h3vpKpuh8Yffe3WqwwwEvAHXzEa8AHuMSvgLsYqC8BH+JZfQu4h0Fnihkc7rFFBYs1cjQQHDM7ok9gENMKVmQImTuWRYkldQnthjdyf1IznvLLGJXMpmQUxBFuaO+AmbvfVnadN3I8G0li4kRWW3FM2XJZyHLT5K6qZSqZK5u0KFx043jt33r4ewxcMXnLdjZt+av01m7o54E/912tSWmVRNQiOP9Pf7tsjBNor1a/68acf5q7ap1KEhk5f2+MMD7RcaJbEXs7vGayHY31FGHhtnTkfdvQBb+GbxZG6ThM64u1a3ggJ8IZxn4d2o/81KOKduIraCzCqnbRkxcz9viRdsjzoY8yb2s2lVa1daUYE0fGGLmQpsk4fpfbkst5MNHZeCS6kFPRlUyM6AXXRfck8Vj0owwXQ9GZ6Hqf9j9MF4LmAAB4nGNgYgCD/80MRgzYADsQMzIwMSgxuDF4M/gDAEeXAsMAAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwEEUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgwFBCuzDxEFBCtZsgQoCUVSRLMKDgYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAA==") format('woff'), url("data:application/octet-stream;base64,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sAIlRlBYIDxZLrEkARQrLbA2LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEkARQrLbA3LLAuKyMgLkawAiVGUlggPFkusSQBFCstsDgssC8riiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSQBFCuwBEMusCQrLbA5LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwEEUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgwFBCuzDxEFBCtZsgQoCUVSRLMKDgYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAA==") format('truetype');
}
html { width: 100%; height: 100%;
}
body { width: 100%; height: 100%; overflow: hidden; background: rgb(105,155,200); background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%); background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1))); background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%); background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%); background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%); background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 );
}
nav { position: fixed; top: 50%; left: 50%; margin-left: -146px; margin-top: -50px; width: 290px; height: 54px; overflow: hidden; box-shadow: 0px 1px 3px rgba(86, 116, 148,0.5), 0px 2px 5px rgba(86, 116, 148,0.6), 0px 0px 10px rgba(86, 116, 148,0.3); border-radius: 3px;
}
ul { width: auto; list-style-type: none; margin: 0px; padding: 0px;
}
ul:before { content: " "; display: block; position: absolute; width: inherit; width: 290px; height: 54px; z-index: 2; box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.1) inset; border-radius: 3px;
}
ul li { display: block; float: left; height: 54px; width: 71px; border-right: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(86, 116, 148, 0.15); text-align: center; background: rgb(244,247,250); background: -moz-linear-gradient(top, rgba(244,247,250,1) 0%, rgba(213,224,235,1) 91%, rgba(179,200,221,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,247,250,1)), color-stop(91%,rgba(213,224,235,1)), color-stop(100%,rgba(179,200,221,1))); background: -webkit-linear-gradient(top, rgba(244,247,250,1) 0%,rgba(213,224,235,1) 91%,rgba(179,200,221,1) 100%); background: -o-linear-gradient(top, rgba(244,247,250,1) 0%,rgba(213,224,235,1) 91%,rgba(179,200,221,1) 100%); background: -ms-linear-gradient(top, rgba(244,247,250,1) 0%,rgba(213,224,235,1) 91%,rgba(179,200,221,1) 100%); background: linear-gradient(to bottom, rgba(244,247,250,1) 0%,rgba(213,224,235,1) 91%,rgba(179,200,221,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7fa', endColorstr='#b3c8dd',GradientType=0 );
}
ul li.active { border-left: 1px solid rgba(86, 116, 148, 0.3); color: white; background: rgb(173,200,228); background: -moz-linear-gradient(top, rgba(173,200,228,1) 0%, rgba(143,177,212,1) 91%, rgba(124,160,198,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,200,228,1)), color-stop(91%,rgba(143,177,212,1)), color-stop(100%,rgba(124,160,198,1))); background: -webkit-linear-gradient(top, rgba(173,200,228,1) 0%,rgba(143,177,212,1) 91%,rgba(124,160,198,1) 100%); background: -o-linear-gradient(top, rgba(173,200,228,1) 0%,rgba(143,177,212,1) 91%,rgba(124,160,198,1) 100%); background: -ms-linear-gradient(top, rgba(173,200,228,1) 0%,rgba(143,177,212,1) 91%,rgba(124,160,198,1) 100%); background: linear-gradient(to bottom, rgba(173,200,228,1) 0%,rgba(143,177,212,1) 91%,rgba(124,160,198,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adc8e4', endColorstr='#7ca0c6',GradientType=0 );
}
ul li.active + li { border-left: 1px solid rgba(86, 116, 148, 0.6);
}
ul li.active a[href^="#"]:before { color: white; text-shadow: 0px 1px 1px rgba(86, 116, 148, 0.6);
}
ul li a, ul li a:visited { font-family: Arial, sans-serif; font-size: 12px; color: transparent; text-decoration: none; width: 100%; height: 100%;
}
ul li a[href^="#"]:before { font-family: fontello; color: #40648a; position: absolute; margin: 14px auto; padding-left: 0px; font-size: 25px; text-shadow: 0px 1px 1px white;
}
ul li a[href^="#home"]:before { content: "h"; padding-left: 5px;
}
ul li a[href^="#like"]:before { content: "l";
}
ul li a[href^="#chat"]:before { content: "c";
}
ul li a[href^="#help"]:before { content: "?";
}
ul li:first-child { border-left: none; border-radius: 3px 0px 0px 3px;
}
ul li:last-child { border-right: none; border-radius: 0px 3px 3px 0px;
}

Toolbar (Dribbble, CSS remix) - Script Codes JS Codes

/* Small CSS demo utilizing pseudo elements as well as neighbor selector (+). Design reference: http://drbl.in/gffS
*/
Toolbar (Dribbble, CSS remix) - Script Codes
Toolbar (Dribbble, CSS remix) - Script Codes
Home Page Home
Developer Carl Calderon
Username carlcalderon
Uploaded July 30, 2022
Rating 4
Size 10,426 Kb
Views 58,696
Do you need developer help for Toolbar (Dribbble, CSS remix)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Carl Calderon (carlcalderon) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!