Mac style Doc menu by fivera.net

Developer
Fivera
Size
2,376 Kb
Views
4,048
  1. Mac style Doc menu by fivera.net Previews
  2. Mac style Doc menu by fivera.net HTML Codes
  3. Mac style Doc menu by fivera.net CSS Codes

How do I make an mac style doc menu by fivera.net?

Example of mac style dock menu for http://fivera.net/. What is a mac style doc menu by fivera.net? How do you make a mac style doc menu by fivera.net? This script and codes were developed by Fivera on 31 January 2023, Tuesday.

Mac style Doc menu by fivera.net Previews
IQ Test

Mac style Doc menu by fivera.net - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mac style Doc menu by fivera.net</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body background="http://fivera.net/wp-content/uploads/2013/08/mac-wallpaper-galaxy.jpg"></body>	<div id="dockContainer">	<div id="dockWrapper">	<div class="cap left"></div>	<ul class="osx-dock">	<li class="active">	<span>FIVERA</span>	<a href="#"><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	<li>	<span>FIVERA</span>	<a href="#" ><img src="http://fivera.net/wp-content/uploads/2013/08/Apple-Logo.png" /></a>	</li>	</ul>	</div>	</div>
</body>
</html>

Mac style Doc menu by fivera.net - Script Codes CSS Codes

/* MAc style dock by fivera.net */
div.cap {	display: block;	height: 100px;	width: 40px;	background: url(http://fivera.net/wp-content/uploads/2013/08/dock-background-fivera-net.png) bottom left no-repeat;
}
div.cap.left {	position: absolute;	bottom: 0px;	left: 0px;
}
div.cap.right {	background-position: right bottom;	position: absolute;	top: 0px;	right: 0px;
}
ul.osx-dock {	display: inline-block;	height: 130px;	padding: 0 40px 0 0;	background: url(http://fivera.net/wp-content/uploads/2013/08/dock-background-fivera-net.png) no-repeat right bottom;	overflow: hidden;	margin: 0 0 0 40px;
}
ul.osx-dock li {	display: block;	position: relative;	float: left;	width: 50px;	height: 50px;	margin: 60px 0 4px 0;	-webkit-transition: 0.15s linear;	-moz-transition: 0.15s linear;	-o-transition: 0.15s linear;	-ms-transition: 0.15s linear;	transition: 0.15s linear;	-webkit-transition-property: -webkit-transform margin;	-moz-transition-property: -moz-transform margin;	-o-transition-property: -o-transform margin;	-ms-transition-property: -ms-transform margin;	transition-property: transform margin;	text-align: center;
}
ul.osx-dock li a {	display: block;	height: 50px;	padding: 0 1px;	-webkit-transition: 0.15s linear;	-moz-transition: 0.15s linear;	-o-transition: 0.15s linear;	-ms-transition: 0.15s linear;	transition: 0.15s linear;	-webkit-transition-property: -webkit-transform margin;	-moz-transition-property: -moz-transform margin;	-o-transition-property: -o-transform margin;	-ms-transition-property: -ms-transform margin;	transition-property: transform margin;	margin: 0;	-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}
ul.osx-dock li a img {	width: 48px;
}
ul.osx-dock li:hover {	margin-left: 9px;	margin-right: 9px;	z-index: 200;
}
ul.osx-dock li:hover a {	-webkit-transform-origin: center bottom;	-moz-transform-origin: center bottom;	-o-transform-origin: center bottom;	-ms-transform-origin: center bottom;	transform-origin: center bottom;	-webkit-transform: scale(1.5);	-moz-transform: scale(1.5);	-o-transform: scale(1.5);	-ms-transform: scale(1.5);	transform: scale(1.5);
}
ul.osx-dock li.nearby {	margin-left: 6px;	margin-right: 6px;	z-index: 100;
}
ul.osx-dock li.nearby a {	-webkit-transform-origin: center bottom;	-moz-transform-origin: center bottom;	-o-transform-origin: center bottom;	-ms-transform-origin: center bottom;	transform-origin: center bottom;	-webkit-transform: scale(1.25);	-moz-transform: scale(1.25);	-o-transform: scale(1.25);	-ms-transform: scale(1.25);	transform: scale(1.25);
}
ul.osx-dock li span {	background: rgba(0,0,0,0.75);	position: absolute;	bottom: 80px;	margin: 0 auto;	display: none;	width: auto;	font-size: 11px;	font-weight: bold;	padding: 3px 6px;	border-radius: 6px;	color: #fff;
}
ul.osx-dock li:hover span {	display: block;
}
div#dockContainer {	position: fixed;	bottom: 65px;	height: 120px;	padding: 50px 0 0;	text-align: center;	border-radius: 6px;	width: 100%;	line-height: 1;	z-index: 100;
}
div#dockWrapper {	width: auto;	display: inline-block;	position: relative;	border-bottom: solid 2px rgba(255,255,255,.35);	line-height: 0;
}
Mac style Doc menu by fivera.net - Script Codes
Mac style Doc menu by fivera.net - Script Codes
Home Page Home
Developer Fivera
Username fivera
Uploaded January 31, 2023
Rating 3
Size 2,376 Kb
Views 4,048
Do you need developer help for Mac style Doc menu by fivera.net?

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!

Fivera (fivera) Script Codes
Name
Social example 3
Another brick in the wall
Css3 buttons
Fivera
Animated CSS Book
Enlarge
Paper text area
Cool css menu
Css image viewer
Webkits blur
Create amazing blog posts 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!