Horizontal Navigation Menu Fold Effect With CSS3

Horizontal Navigation Menu Fold Effect
File Size:276.07 KB
Views Total:342
Last Update:January 18, 2018
Publish Date:January 18, 2018
Official Website:Go to website
License:MIT

we will create a horizontal navigation menu fold/unfold effect with help of CSS3. we will using only css3 and no javascript is required and effects work amazing, we will be using css3 rotateX() function, 3D transform and transition properties to create the fold and unfold effect, we will create two styles menu, one main menu and second with sub menu levels and the second with the sub menu level and an image preview, you can preview the final result in the link below.

How to use :

1. Add HTML Code :

<nav>
	<ul>
		<li>
			<a href="#" data-item="team">Menu<i class="nav_arrow"></i></a>

			<!--  Menu item Sub menu level 1 Style 1  -->
			<div class="sm_style1_level1">
					<ul>
						<li>
							<a href="#">
								<span class="txt"><img alt="" title="" src="images/menu_icon1.png" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
							</a>

							<!--  Menu item Sub menu level 2 Style 1  -->
							<div class="sm_style1_level2">
								<ul>
									<li>
										<a href="#">
											<span class="txt">Level 2</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="txt">Level 2</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="txt">Level 2</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="txt">Level 2</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="txt">Level 2</span>
										</a>
									</li>
								</ul>
							</div>
						</li>

						<li>
							<a href="#">
								<span class="txt"><img alt="" title="" src="images/menu_icon2.png" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
							</a>

							<!--  ...  -->
							
						</li>

						<li>
							<a href="#">
								<span class="txt"><img alt="" title="" src="images/menu_icon3.png" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
							</a>

							<!--  ...  -->
							
						</li>

						<li>
							<a href="#">
								<span class="txt"><img alt="" title="" src="images/menu_icon4.png" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
							</a>

							<!--  ...  -->
							
						</li>

						<li>
							<a href="#">
								<span class="txt"><img alt="" title="" src="images/menu_icon5.png" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
							</a>

							<!--  ...  -->
							
						</li>

					</ul>
			</div>
		</li>

		<li>
			<a href="#">Countries<i class="nav_arrow"></i></a>

			<!--  Countries item Sub menu level 1 style 2  -->
			<div class="sm_style2_level1">
					<ul>
						<li>
							<a href="#">
								<span class="countries">New York</span>
							</a>
							<a href="#" class="preview">
								<span class="preview_arrow"></span>
								<img alt="" title="" src="images/image1.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<span class="countries">Germany</span>
							</a>
							<a href="#" class="preview">
								<span class="preview_arrow"></span>
								<img alt="" title="" src="images/image2.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<span class="countries">Italy</span>
							</a>
							<a href="#" class="preview">
								<span class="preview_arrow"></span>
								<img alt="" title="" src="images/image3.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<span class="countries">France</span>
							</a>
							<a href="#" class="preview">
								<span class="preview_arrow"></span>
								<img alt="" title="" src="images/image4.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<span class="countries">Spain</span>
							</a>
							<a href="#" class="preview">
								<span class="preview_arrow"></span>
								<img alt="" title="" src="images/image5.jpg">
							</a>
						</li>
					</ul>
			</div>
		</li>

		<li>
			<a href="#">News</a>
		</li>

		<li>
			<a href="#">Contact</a>
		</li>
	</ul>
</nav>

2. Now second method is add CSS :

nav{
    float: right;
}

nav ul li{
    list-style: none;
    float: left;
    margin-left: 40px;
}
nav ul li a{
    display: block;
    height: 100%;
    line-height: 100px;
    text-decoration: none;
    color: #e5edf1;
    font-family: 'raleway-regular', arial;
    font-size: 14px;
    letter-spacing: 1px;
}

3. Add CSS With Animation Effects :

.sm_style1_level1,
.sm_style1_level2,
.sm_style2_level1{
    width: 100%!important;
    height: 80px;
    left: 0;
    top: 100px;
    background: #435765;
    position: absolute;
    opacity: 0;
    z-index: 2;

    /*  transition: <property> <duration> <timing-function> <delay>;  */
    -webkit-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
    -moz-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
    -o-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
    transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;

    -webkit-transform: perspective(1000px) rotateX(-90deg);
    -moz-transform: perspective(1000px) rotateX(-90deg);
    -o-transform: perspective(1000px) rotateX(-90deg);
    transform: perspective(1000px) rotateX(-90deg);

    -webkit-transform-style: preserve- 3 d;
    -moz-transform-style: preserve- 3 d;
    -o-transform-style: preserve- 3 d;
    transform-style: preserve- 3 d;


    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.sm_style1_level2{
    top: 80px;
    background: #3c4f5d;

    -webkit-transition-delay:.2s;
    -moz-transition-delay:.2s;
    -o-transition-delay:.2s;
    transition-delay:.2s;
}

Done