Large vertical menu with CSS3 transitions

Developer
Stathis
Size
3,352 Kb
Views
42,504
  1. Large vertical menu with CSS3 transitions Previews
  2. Large vertical menu with CSS3 transitions HTML Codes
  3. Large vertical menu with CSS3 transitions CSS Codes

How do I make an large vertical menu with css3 transitions?

A large vertical menu with CSS3 transitions (link to tutorial).. What is a large vertical menu with css3 transitions? How do you make a large vertical menu with css3 transitions? This script and codes were developed by Stathis on 02 August 2022, Tuesday.

Large vertical menu with CSS3 transitions Previews
IQ Test

Large vertical menu with CSS3 transitions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Large vertical menu with CSS3 transitions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="container"> <nav class="menu-container"> <ul> <li><a href="#">Some cool quote about <strong>home</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/home.jpg" alt="Some cool quote about home" /></li> <li><a href="#">Some cool quote about <strong>movies</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/movies.jpg" alt="Some cool quote about movies" /></li> <li><a href="#">Some cool quote about <strong>music</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/music.jpg" alt="Some cool quote about music" /></li> <li><a href="#">Some cool quote about <strong>games</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/games.jpg" alt="Some cool quote about games" /></li> <li><a href="#">Some cool quote about <strong>books</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/books.jpg" alt="Some cool quote about books" /></li> <li><a href="#">Some cool quote about <strong>art</strong></a><img src="http://static.burnmind.com/demos/css3-menu-transitions/images/art.jpg" alt="Some cool quote about art" /></li> </ul> </nav> <article> <p>This is a demo of the <a href="http://burnmind.com/tutorials/ccs3-menu-transitions">How to create a large CCS3 menu with transitions</a> tutorial @ <a href="http://burnmind.com/">burnmind.com</a>.</p> <p>Try the other two versions: <a href="http://codepen.io/stathisg/details/kihan?preview_height=700">Horizontal</a> &amp; <a href="http://codepen.io/stathisg/details/fvDJs?preview_height=700">Horizontal with opaque text</a>.</p> <p>Credits: <a href="http://dribbble.com/shots/472966-Texture-for-Web">texture</a>, icons <a href="http://thenounproject.com/noun/home/#icon-No1662">1</a>, <a href="http://thenounproject.com/noun/movie/#icon-No18142">2</a>, <a href="http://thenounproject.com/noun/music/#icon-No11941">3</a>, <a href="http://thenounproject.com/noun/game/#icon-No8609">4</a>, <a href="http://thenounproject.com/noun/book/#icon-No2574">5</a>, <a href="http://thenounproject.com/noun/art-gallery/#icon-No2416">6</a>.</p> <p class="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in massa id orci faucibus laoreet eget sed tortor. Phasellus auctor est a metus faucibus, nec tristique est molestie. Nunc malesuada, erat sed suscipit ornare, elit lorem placerat turpis, vel pellentesque est ligula id nisi. Curabitur feugiat libero auctor bibendum consequat. Pellentesque ut pellentesque velit, sed sodales nunc. Nulla facilisi. Ut nec libero eu nunc suscipit facilisis ut non magna. Fusce ornare vel nibh vel scelerisque. Integer lacus magna, porttitor congue suscipit et, pellentesque sed ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus libero nunc, gravida vitae dictum ut, tincidunt nec sapien. Integer purus metus, malesuada quis bibendum nec, semper quis lorem. Pellentesque et libero vel justo accumsan eleifend. Etiam lorem mauris, convallis at mi eget, convallis placerat orci. Vestibulum luctus laoreet tellus eu gravida. Phasellus lobortis urna vel odio fringilla rhoncus.</p> <p class="lorem-ipsum">Nunc dignissim risus lobortis dictum cursus. Proin ornare laoreet gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi tincidunt enim in blandit congue. Phasellus placerat sapien vitae aliquet lobortis. Ut urna erat, commodo at euismod vel, iaculis ac elit. Vivamus mollis nibh rutrum dolor dignissim aliquam. Donec in enim ac purus sollicitudin adipiscing. Maecenas tincidunt, nibh ac tristique rhoncus, turpis sapien aliquam dui, nec sollicitudin diam purus vitae massa. Nulla posuere nisl eget justo ullamcorper sollicitudin. In a fringilla lacus. Nullam suscipit eros eu nulla convallis, a placerat est egestas. Maecenas sit amet velit ac tellus volutpat tincidunt. Ut vitae nisl purus. Curabitur vulputate iaculis ligula, non egestas massa auctor in.</p> </article>
</section>
</body>
</html>

Large vertical menu with CSS3 transitions - Script Codes CSS Codes

html
{ background-image: url('http://static.burnmind.com/demos/css3-menu-transitions/images/texture.jpg'); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 2%; font-size: 1em;
}
a
{ color: #0CC5DA; text-decoration: none;
}
a:hover
{ color: #DCE808; text-decoration: underline;
}
p
{ margin: 0 0 1em 0; padding: 0; line-height: 1.4em;
}
.container
{ margin: 0 auto; width: 960px;
}
article
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1em; width: 75%; margin-top: 7%; float: right; background-color: #fff;
}
article p.lorem-ipsum
{ color: #ccc;
}
.menu-container
{ font-family: Georgia, Times, "Times New Roman", serif; width: 13%; float: left;
}
.menu-container ul, .menu-container li
{ margin: 0; padding: 0; list-style: none; position: relative;
}
.menu-container li
{ float: left; width: 100%; margin-top: -3%;
}
.menu-container li img
{ width: 100%;
}
.menu-container li a
{ line-height: 1.4em; font-size: 1em; padding: 10%; background-color: #000; color: #fff; position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.menu-container li a:hover
{ text-decoration: none; width: 110%; height: 110%; margin-top: -5%; margin-left: -5%; padding: 14%; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;
}
Large vertical menu with CSS3 transitions - Script Codes
Large vertical menu with CSS3 transitions - Script Codes
Home Page Home
Developer Stathis
Username stathisg
Uploaded August 02, 2022
Rating 3
Size 3,352 Kb
Views 42,504
Do you need developer help for Large vertical menu with CSS3 transitions?

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!

Stathis (stathisg) Script Codes
Name
A slideshow with a blinds transition
Large horizontal menu with CSS3 transitions
Mosaic transition effect between two photos using jQuery
Create amazing video scripts 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!