Embedded Files
En èpoques d'engany com ara, dir la veritat és revolucionari. Front el feixisme, ni un pas enrere! Viure sense llibertat, no és viure, és sobreviure.
Menú Top Navigator
Menú Top Navigator
Clica damunt de la imatge per veure un exemple
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div class="topnav">
<a class="active" href="https://www.ipsi.cat/cat/zona-usuaris">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
</div>
<div style="padding-left:16px">
</div>
Al final de l'arxiu estils.css copieu les següents instruccions:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Menú Navigation Bar with Icons
Menú Navigation Bar with Icons
Clica damunt de la imatge per veure un exemple
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div class="navbar">
<a class="active" href="https://www.ipsi.cat/cat/zona-usuaris"><i class="fa fa-fw fa-home"></i> Home</a>
<a href=""><i class="fa fa-fw fa-search"></i> Search</a>
<a href=""><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href=""><i class="fa fa-fw fa-user"></i> Login</a>
</div>
Més icones Font Awesome.
Al final de l'arxiu estils.css copieu les següents instruccions:
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
Menú Sidenav Push
Menú Sidenav Push
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="https://www.ipsi.cat/cat/zona-usuaris">Home</a>
<a href="">Services</a>
<a href="">Clients</a>
<a href="">Contact</a>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
Al final de l'arxiu estils.css copieu les següents instruccions:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Clica damunt de la imatge per veure un exemple
Menú Hoverable Sidenav Buttons
Menú Hoverable Sidenav Buttons
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div id="mySidenav" class="sidenav">
<a href="https://www.ipsi.cat/cat/zona-usuaris" id="home">Home</a>
<a href="" id="blog">Blog</a>
<a href="" id="projects">Projects</a>
<a href="" id="contact">Contact</a>
</div>
Al final de l'arxiu estils.css copieu les següents instruccions:
#mySidenav a {
position: absolute;
left: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
left: 0;
}
#home {
top: 20px;
background-color: #04AA6D;
}
#blog {
top: 80px;
background-color: #2196F3;
}
#projects {
top: 140px;
background-color: #f44336;
}
#contact {
top: 200px;
background-color: #555
}
Clica damunt de la imatge per veure un exemple
Menú Vertical
Menú Vertical
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div class="vertical-menu">
<a href="https://www.ipsi.cat/cat/zona-usuaris" class="active">Home</a>
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>
</div>
Al final de l'arxiu estils.css copieu les següents instruccions:
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
Clica damunt de la imatge per veure un exemple
Menú Bottom Navigation Bar
Menú Bottom Navigation Bar
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div class="navbar">
<a href="https://www.ipsi.cat/cat/zona-usuaris" class="active">Home</a>
<a href="">News</a>
<a href="">Contact</a>
</div>
Al final de l'arxiu estils.css copieu les següents instruccions:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
Clica damunt de la imatge per veure un exemple
Menú Sticky Social Bar
Menú Sticky Social Bar
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div class="icon-bar">
<a href="" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="" class="google"><i class="fa fa-google"></i></a>
<a href="" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://www.youtube.com/" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
Al final de l'arxiu estils.css copieu les següents instruccions:
body {margin:0;height:2000px;}
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #000;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.content {
margin-left: 75px;
font-size: 30px;
}
Clica damunt de la imatge per veure un exemple
Menú Hover Dropdown
Menú Hover Dropdown
Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:
<meta name="viewport" content="width=device-width, initial-scale=1">
Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="https://www.ipsi.cat/cat/zona-usuaris">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>
</div>
Al final de l'arxiu estils.css copieu les següents instruccions:
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
Clica damunt de la imatge per veure un exemple
Més tipus de menús
Més tipus de menús
En aquest web trobareu més tipus de menús.
Report abuse