"Menú principal"
Bootstrap 4.1.1 Snippet by ReaYouFather

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Love Style Header Menu Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<header>
<div class="nav-modal">
<div class="blob"></div>
<nav>
<ul>
<li>
<a href="#" class="nounderline"><span class="space-bet-elements">01</span>HOME</a>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
padding: 0;
margin: 0;
background-color: #777;
background-image: url('http://s2.best-wallpaper.net/wallpaper/3840x2160/1702/Croatia-resort-hotel-lights-pool-night_3840x2160.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
header *{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header{
height: 120px;
width: 100%;
position: relative;
}
.timlogo{
width: 200px;
display: block;
margin: 0 auto;
padding-top: 15px;
}
.head{
position: absolute;
top: 35px;
}
.head .tile{
display: inline-block;
height: 50px;
width: 50px;
margin-left: 5px;
transition: all .3s ease-in;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//This simple script handles the header nav menu modal
//also covered nav sub menu selection
//Dependencies: jQuery
$(document).ready(function() {
$('.burger').click(function(){
$('header').toggleClass('clicked');
});
$('nav ul li').click(function(){
$('nav ul li').removeClass('selected');
$('nav ul li').addClass('notselected');
$(this).toggleClass('selected');
$(this).removeClass('notselected');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System

Questions / Comments: