Joomla.it Forum
Joomla! 3 => Joomla! 3 => : m_clayton 23 Feb 2017, 22:45:22
-
ciao a tutti, voglio inserire nel sito di un amico un header o menų scalabile pių o meno come questo
(http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-resizing-menu-bar/)in questo esempio l'autore offre il codice, ok ma č tutto codice html, come faccio a integrarlo con joomla, sono costretta a creare un nuovo modulo ad-hoc, o posso limitarmi a scriverlo in qualche file del template che sto usando?
grazie a tutti quelli che mi risponderanno
michela
-
No non serve nessun modulo, quell'effetto e puro CSS, quindi puoi adattare il codice con un pō di pazienza.
-
ok, diciamo che sono sempre stata abituata ad editare il custom.css che nei vari template sta nella directory css del template, posso aggiungere il codice html, chiaramente solo quello relativo alle funzioni css
mi spiego meglio, questo č il codice:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>How to create a resizing menu bar | Webdesigner Depot</title>
<meta name="author" content="Antonio Pratas">
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
header, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
/* Basic layout */
body{
background-color: #ebebeb;
}
ul{
list-style-type: none;
float: right;
}
li{
display: inline;
float: left;
}
img.logo{
float: left;
}
nav{
width: 960px;
margin: 0 auto;
}
section.stretch{
float: left;
height: 1500px;
width: 100%;
}
section.stretch p{
font-family: 'Amaranth', sans-serif;
font-size: 30px;
color: #969696;
text-align: center;
position: relative;
margin-top: 250px;
}
section.stretch p.bottom{
top: 100%;
}
header{
background: #C7C7C7;
border-bottom: 1px solid #aaaaaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
header a{
color: #969696;
text-decoration: none;
font-family: 'Amaranth', sans-serif;
text-transform: uppercase;
}
header a.active, header a:hover{
color: #3d3d3d;
}
header li{
margin-right: 30px;
}
/* Sizes for the bigger menu */
header.large{
height: 120px;
}
header.large img{
width: 489px;
height: 113px;
}
header.large li{
margin-top: 45px;
}
/* Sizes for the smaller menu */
header.small{
height: 50px;
}
header.small img{
width: 287px;
height: 69px;
margin-top: -10px;
}
header.small li{
margin-top: 17px;
}
</style>
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("header").removeClass("large").addClass("small");
}
else{
$("header").removeClass("small").addClass("large");
}
});
</script>
</head>
<body>
<header class="large">
<nav>
<img class="logo" src="wdd.png"/>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Awesome Freebies</a></li>
</ul>
</nav>
</header>
<section class="stretch">
<p>Let's get that menu small!</p>
<p class="bottom">End of the line.</p>
</section>
</body>
</html>
-
ed io posso aggiungere al mio custom .css solo questo:
header, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
/* Basic layout */
body{
background-color: #ebebeb;
}
ul{
list-style-type: none;
float: right;
}
li{
display: inline;
float: left;
}
img.logo{
float: left;
}
nav{
width: 960px;
margin: 0 auto;
}
section.stretch{
float: left;
height: 1500px;
width: 100%;
}
section.stretch p{
font-family: 'Amaranth', sans-serif;
font-size: 30px;
color: #969696;
text-align: center;
position: relative;
margin-top: 250px;
}
section.stretch p.bottom{
top: 100%;
}
header{
background: #C7C7C7;
border-bottom: 1px solid #aaaaaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
header a{
color: #969696;
text-decoration: none;
font-family: 'Amaranth', sans-serif;
text-transform: uppercase;
}
header a.active, header a:hover{
color: #3d3d3d;
}
header li{
margin-right: 30px;
}
/* Sizes for the bigger menu */
header.large{
height: 120px;
}
header.large img{
width: 489px;
height: 113px;
}
header.large li{
margin-top: 45px;
}
/* Sizes for the smaller menu */
header.small{
height: 50px;
}
header.small img{
width: 287px;
height: 69px;
margin-top: -10px;
}
header.small li{
margin-top: 17px;
}
-
l'ho fatta troppo semplice? ;)
-
l'hai fatta molto, moltissimo semplice.
le regole sono giuste, ma andranno applicate con criterio ai vari div del template che usi.......
-
ok, allora cercherō di editare il file .css principale del template, provo a modificare le voci header, faccio un po' di prove, sono su una buona strada?