CSS3 Menus

Developer

Size

3,644 Kb

Views

34,408

CSS3 Menus Previews
CSS3 Menus HTML Codes
CSS3 Menus CSS Codes

How do I make an css3 menus?

What is a css3 menus? How do you make a css3 menus? This script and codes were developed by WebSonick on 15 October 2022, Saturday.

CSS3 Menus Previews

CSS3 Menus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Menus</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CSS3 Menus</h1>
<br>
<div class='cols'> <div class='col_half'> <ul class="piechart"> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon1.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon2.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon3.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon4.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon5.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon6.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon7.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon8.png" alt=""></b></a> </li> <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon9.png" alt=""></b></a> </li> <li></li> </ul> </div> <div class='col_half'> <ul class="circle"> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p1.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p2.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p3.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p4.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p5.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p6.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p7.png" alt=""></a> </li> <li><a href="#">
<img src="http://delaisait.ucoz.ru/script/menu/img/5/p8.png" alt=""></a> </li> <li> <img src="http://delaisait.ucoz.ru/script/menu/img/5/p9.png" alt="">
<b class="b1">▲</b>
<b class="b2">▲</b>
<b class="b3">▲</b>
<b class="b4">▲</b>
<b class="b5">▲</b>
<b class="b6">▲</b>
<b class="b7">▲</b>
<b class="b8">▲</b>
<b class="b9">▲</b> </li> </ul> </div>
</div>
</body>
</html>

CSS3 Menus - Script Codes CSS Codes

@font-face { font-family:'Electrolize'; font-style: normal; font-weight: 400; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
body { background:url(http://web-sonick.zz.mu/images/BG/bgtab-cont.jpg);
}
h1 { font-family:'Electrolize'; font-size:40px; color:white; text-align:center; background:url(http://web-sonick.zz.mu/images/BG/skyblue.jpg); width:400px; margin-left:auto; margin-right:auto;
}
.cols > div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.col_half { float: left; width: 60%; padding: 0 0.75em;
}
.cols2 > div { padding-top:5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.col_half { float: left; width: 50%; padding: 0 0.75em;
}
ul.piechart { padding:0; margin:0 auto; list-style:none; width:340px; height:340px; overflow:hidden; border-radius:320px; position:relative; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -ms-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg);
}
ul.piechart li { width:300px; height:300px; background:transparent; position:absolute; left:170px; top:-130px; overflow:hidden; -webkit-transform-origin:0 300px; -moz-transform-origin:0 300px; -ms-transform-origin:0 300px; -o-transform-origin:0 300px; transform-origin:0 300px;
}
ul.piechart li b { -webkit-transform: skewY(50deg); -moz-transform: skewY(50deg); -ms-transform: skewY(50deg); -o-transform: skewY(50deg); transform: skewY(50deg);
}
ul.piechart li:nth-child(1) { -webkit-transform: skewY(-50deg); -moz-transform: skewY(-50deg); -ms-transform: skewY(-50deg); -o-transform: skewY(-50deg); transform: skewY(-50deg);
}
ul.piechart li:nth-child(1) b { background:#c88;
}
ul.piechart li:nth-child(2) { -webkit-transform:rotate(40deg) skewY(-50deg); -moz-transform:rotate(40deg) skewY(-50deg); -ms-transform:rotate(40deg) skewY(-50deg); -o-transform:rotate(40deg) skewY(-50deg); transform:rotate(40deg) skewY(-50deg);
}
ul.piechart li:nth-child(2) b { background:#c68;
}
ul.piechart li:nth-child(3) { -webkit-transform:rotate(80deg) skewY(-50deg); -moz-transform:rotate(80deg) skewY(-50deg); -ms-transform:rotate(80deg) skewY(-50deg); -o-transform:rotate(80deg) skewY(-50deg); transform:rotate(80deg) skewY(-50deg);
}
ul.piechart li:nth-child(3) b { background:#cc8;
}
ul.piechart li:nth-child(4) { -webkit-transform:rotate(120deg) skewY(-50deg); -moz-transform:rotate(120deg) skewY(-50deg); -ms-transform:rotate(120deg) skewY(-50deg); -o-transform:rotate(120deg) skewY(-50deg); transform:rotate(120deg) skewY(-50deg);
}
ul.piechart li:nth-child(4) b { background:#696;
}
ul.piechart li:nth-child(5) { -webkit-transform:rotate(160deg) skewY(-50deg); -moz-transform:rotate(160deg) skewY(-50deg); -ms-transform:rotate(160deg) skewY(-50deg); -o-transform:rotate(160deg) skewY(-50deg); transform:rotate(160deg) skewY(-50deg);
}
ul.piechart li:nth-child(5) b { background:#869;
}
ul.piechart li:nth-child(6) { -webkit-transform:rotate(200deg) skewY(-50deg); -moz-transform:rotate(200deg) skewY(-50deg); -ms-transform:rotate(200deg) skewY(-50deg); -o-transform:rotate(200deg) skewY(-50deg); transform:rotate(200deg) skewY(-50deg);
}
ul.piechart li:nth-child(6) b { background:#c8c;
}
ul.piechart li:nth-child(7) { -webkit-transform:rotate(240deg) skewY(-50deg); -moz-transform:rotate(240deg) skewY(-50deg); -ms-transform:rotate(240deg) skewY(-50deg); -o-transform:rotate(240deg) skewY(-50deg); transform:rotate(240deg) skewY(-50deg);
}
ul.piechart li:nth-child(7) b { background:#689;
}
ul.piechart li:nth-child(8) { -webkit-transform:rotate(280deg) skewY(-50deg); -moz-transform:rotate(280deg) skewY(-50deg); -ms-transform:rotate(280deg) skewY(-50deg); -o-transform:rotate(280deg) skewY(-50deg); transform:rotate(280deg) skewY(-50deg);
}
ul.piechart li:nth-child(8) b { background:#89c;
}
ul.piechart li:nth-child(9) { -webkit-transform:rotate(320deg) skewY(-50deg); -moz-transform:rotate(320deg) skewY(-50deg); -ms-transform:rotate(320deg) skewY(-50deg); -o-transform:rotate(320deg) skewY(-50deg); transform:rotate(320deg) skewY(-50deg);
}
ul.piechart li:nth-child(9) b { background:#9ca;
}
ul.piechart li:nth-child(1) b, ul.piechart li:nth-child(2) b, ul.piechart li:nth-child(3) b, ul.piechart li:nth-child(4) b, ul.piechart li:nth-child(5) b, ul.piechart li:nth-child(6) b, ul.piechart li:nth-child(7) b, ul.piechart li:nth-child(8) b, ul.piechart li:nth-child(9) b { display:block; width:300px; height:300px; border-radius:300px; position:absolute; left:-150px; top:150px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.9);
}
ul.piechart li:nth-child(10) { width:200px; height:200px; box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.9); border-radius:200px; background:#fff; position:absolute; left:70px; top:70px;
}
ul.piechart li a b img { position:absolute; left:180px; top:20px; border:0; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -ms-transform:rotate(20deg); -o-transform:rotate(20deg); transform:rotate(20deg);
}
ul.piechart li a:hover b { background:#eee;
}
.circle { padding:0; margin:50px auto; list-style:none; width:300px; height:300px; position:relative; border-radius:300px; overflow:hidden;
}
.circle li { position:absolute; left:250px; top:108px; width:50px; height:84px; -webkit-transform-origin:-100px 42px; -moz-transform-origin:-100px 42px; -ms-transform-origin:-100px 42px; -o-transform-origin:-100px 42px; transform-origin:-100px 42px;
}
.circle li:last-child { width:220px; height:220px; position:absolute; left:40px; top:40px; background:#555; border-radius:200px; background-image: -webkit-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%); background-image: -moz-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%); background-image: -ms-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%); background-image: -o-radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%); background-image: radial-gradient(circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%); -webkit-transform-origin:110px 110px; -moz-transform-origin:110px 110px; -ms-transform-origin:110px 110px; -o-transform-origin:110px 110px; transform-origin:110px 110px; -webkit-transition: -webkit-transform 0.75s; -moz-transition: 0.75s; -ms-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s;
}
.circle li:last-child img { position:absolute; left:98px; top:5px; border:0;
}
.circle li:last-child b { display:none; width:20px; height:20px; border:1px solid #fff; border-radius:20px; font:normal 14px/20px arial, sans-serif; color:#fff; background:#888; text-align:center; position:absolute; left:99px; top:99px;
}
.circle li a { display:block; width:50px; height:84px; background:#555; position:relative; z-index:100; -webkit-transition: 0.75s; -moz-transition: 0.75s; -ms-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s;
}
.circle li a img { border:0; display:block; position:absolute; left: 20px; top:30px;
}
.circle li a:before { display:block; width:50px; height:64px; content:""; position:absolute; left:0; top:0; background:#555; z-index:-1; border:1px solid #666; border-width:1px 0 0 0; -webkit-transform-origin:0% 0%; -moz-transform-origin:0% 0%; -ms-transform-origin:0% 0%; -o-transform-origin:0% 0%; transform-origin:0% 0%; -webkit-transform: rotate(-22.5deg); -moz-transform: rotate(-22.5deg); -ms-transform: rotate(-22.5deg); -o-transform: rotate(-22.5deg); transform: rotate(-22.5deg); -webkit-transition: 0.75s; -moz-transition: 0.75s; -ms-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s;
}
.circle li a:after { display:block; width:50px; height:66px; content:""; position:absolute; left:0; bottom:0; background:#555; z-index:-1; border:1px solid #666; border-width:0 0 1px 0; -webkit-transform-origin:0% 100%; -moz-transform-origin:0% 100%; -ms-transform-origin:0% 100%; -o-transform-origin:0% 100%; transform-origin:0% 100%; -webkit-transform: rotate(22.5deg); -moz-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); -o-transform: rotate(22.5deg); transform: rotate(22.5deg); -webkit-transition: 0.75s; -moz-transition: 0.75s; -ms-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s;
}
.circle li:nth-child(1) { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);
}
.circle li:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.circle li:nth-child(3) { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.circle li:nth-child(4) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.circle li:nth-child(5) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.circle li:nth-child(6) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);
}
.circle li:nth-child(7) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.circle li:nth-child(8) { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg);
}
.circle li:nth-child(1) img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.circle li:nth-child(2) img { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.circle li:nth-child(3) img { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.circle li:nth-child(4) img { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.circle li:nth-child(5) img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);
}
.circle li:nth-child(6) img { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);
}
.circle li:nth-child(7) img { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg);
}
.circle li:nth-child(8) img { -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); -o-transform: rotate(-225deg); transform: rotate(-225deg);
}
.circle li:nth-child(1) a:hover, .circle li:nth-child(1) a:hover:before, .circle li:nth-child(1) a:hover:after { background:#646;
}
.circle li:nth-child(2) a:hover, .circle li:nth-child(2) a:hover:before, .circle li:nth-child(2) a:hover:after { background:#456;
}
.circle li:nth-child(3) a:hover, .circle li:nth-child(3) a:hover:before, .circle li:nth-child(3) a:hover:after { background:#564;
}
.circle li:nth-child(4) a:hover, .circle li:nth-child(4) a:hover:before, .circle li:nth-child(4) a:hover:after { background:#645;
}
.circle li:nth-child(5) a:hover, .circle li:nth-child(5) a:hover:before, .circle li:nth-child(5) a:hover:after { background:#654;
}
.circle li:nth-child(6) a:hover, .circle li:nth-child(6) a:hover:before, .circle li:nth-child(6) a:hover:after { background:#546;
}
.circle li:nth-child(7) a:hover, .circle li:nth-child(7) a:hover:before, .circle li:nth-child(7) a:hover:after { background:#465;
}
.circle li:nth-child(8) a:hover, .circle li:nth-child(8) a:hover:before, .circle li:nth-child(8) a:hover:after { background:#446;
}
.circle li:nth-child(9) a:hover, .circle li:hover:nth-child(1) ~ li:last-child { background-color:#646; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.circle li:hover:nth-child(2) ~ li:last-child { background-color:#456; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.circle li:hover:nth-child(3) ~ li:last-child { background-color:#564; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.circle li:hover:nth-child(4) ~ li:last-child { background-color:#645; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);
}
.circle li:hover:nth-child(5) ~ li:last-child { background-color:#654; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.circle li:hover:nth-child(6) ~ li:last-child { background-color:#546; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg);
}
.circle li:hover:nth-child(7) ~ li:last-child { background-color:#465; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg);
}
.circle li:hover:nth-child(8) ~ li:last-child { background-color:#446; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg);
}
.circle li:hover:nth-child(1) ~ li:last-child .b1 { display:block;
}
.circle li:hover:nth-child(2) ~ li:last-child .b2 { display:block;
}
.circle li:hover:nth-child(3) ~ li:last-child .b3 { display:block;
}
.circle li:hover:nth-child(4) ~ li:last-child .b4 { display:block;
}
.circle li:hover:nth-child(5) ~ li:last-child .b5 { display:block;
}
.circle li:hover:nth-child(6) ~ li:last-child .b6 { display:block;
}
.circle li:hover:nth-child(7) ~ li:last-child .b7 { display:block;
}
.circle li:hover:nth-child(8) ~ li:last-child .b8 { display:block;
}

Home Page	Home
Developer	WebSonick
Username	WebSonick
Uploaded	October 15, 2022
Rating	3
Size	3,644 Kb
Views	34,408

Do you need developer help for CSS3 Menus?

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!

WebSonick (WebSonick) Script Codes

Name	Size
Login and Registration Form	11,646 Kb
CSS3 Text Effect	1,861 Kb
Rain JS	2,303 Kb
SpongeBob SquarePants CSS3	2,786 Kb
JQuery Clock	2,413 Kb
Night sky with twinkling stars - CSS3 only	1,973 Kb
WebGL Geometry Text	5,406 Kb
Logo Hover effect	1,795 Kb
In second lives - HTML5 CANVAS 3D demo	5,514 Kb
CSS Game - The Right Move	5,565 Kb

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!

Similar Scripts & Codes

Name	Username	Size
CSS3 Animated buttons	Cguillou	3,737 Kb
Update CSS Variables with JS	Wesbos	2,335 Kb
Funny menu	AxeLVaisper	4,671 Kb
Android Play Store With Slick Carousel	-J0hn-	4,982 Kb
Pomodoro Clock	Yas46	3,328 Kb
My three.js practice	Esambino	3,203 Kb
Knockout Lists	Marinru	2,531 Kb
Pure CSS Tooltip	APinix	2,815 Kb
Comparison of Roboto Draft vs Roboto	Jxnblk	2,880 Kb
Google Fonts Sass Mixin	HugoGiraudel	4,237 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!