Inserimento di JQuery

**Giacomara** · 31-07-2017, 12:40

salve ragazzi, sto lavorando alla creazione di un sito web con dreamweaver e ho trovato un menù che mi interessa molto, solo che essendo ancora alle prime armi ho difficoltà a capire come posizionare i codici.
allora al momento del download del menù, ho tre cartelle, una Css, una Js(fin qui nessun problema) è una Scss.
per quanto abbia capito, essendo completamente autodidatta, scss si riferisce a jquery, che per quanto abbia visto va comunque nel tag <script>
Però cercando di impostare il tutto comunque non ottengo i risultati ben sperati.
Qualora non disturbassi e voi aveste la possibilità ne sarei molto grato di ricevere un vostro aiuto.

**fermat** · 31-07-2017, 12:44

ciao!

no scss non c'entra nulla con jquery.
dove l'hai letta questa cosa???

jquery, cmq, si va incluso nel tag script.
o usi il file che hai scaricato insieme al menu (se c'è, la trovi nella cartella js).
o la scarichi a parte dal sito ufficiale.
o usi un CDN.

**Giacomara** · 31-07-2017, 12:51

Allora questo è il codice che ho in uso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body {
background-image: url(castello.jpg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: ; /* optional, center the image */

}

</style>

<script>

</script>

</body>
</html>
Comsidera che nel download ho tre cartelle, una Css, una JS e una Css.
Considerando che Css va nel tag style e Js nel tag script se non disturbo, potresti farmi il piacere di dirmi dove va posta la "cartella" Scss?

**fermat** · 31-07-2017, 12:53

nn ci va!
per curiosità, hai provato a leggere su google che cosa sono i file scss???

a te servono solo i file CSS e JS (jquery compreso).

**Giacomara** · 31-07-2017, 12:57

Ho provato! Ma forse per la foga di inserire un menu nuovo, ho capito poco e niente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body {
background-image: url(castello.jpg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: ; /* optional, center the image */

}
* {
box-sizing: border-box;
}

body {
font-family: 'Montserrat';
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 85vh;
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav__list--active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav__item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
.nav__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
font-size: 24px;
background: #2b3033;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav__link:hover {
background: #272b2e;
}
@media (max-width: 640px) {
.nav {
width: 70px;
}
.nav__list {
height: 90vh;
}
}

.burger {
height: 15vh;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 2;
background: #2b3033;
cursor: pointer;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger:hover {
background: #272b2e;
}
.burger__patty {
position: relative;
height: 2px;
width: 40px;
background: white;
}
.burger__patty:before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty:after {
content: "";
position: absolute;
top: 10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty, .burger__patty:before, .burger__patty:after {
will-change: transform;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger--active .burger__patty {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.burger--active .burger__patty:before {
-webkit-transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}
.burger--active .burger__patty:after {
-webkit-transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}
@media (max-width: 640px) {
.burger {
height: 10vh;
}
.burger__patty {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.burger--active .burger__patty {
-webkit-transform: scale(0.�� rotate(90deg);
transform: scale(0.�� rotate(90deg);
}
}

.panel {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.panel__wrapper {
padding: 7vh 7vw;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.panel__content {
will-change: transform;
-webkit-transform: scale(0.7) rotateX(-230deg);
transform: scale(0.7) rotateX(-230deg);
-webkit-transform-origin: center 80%;
transform-origin: center 80%;
opacity: 0;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel__content--active {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.panel__headline {
font-weight: 700;
opacity: 0.8;
font-size: 48px;
margin: 0 0 25px 0;
}
.panel p {
margin: 0 0 25px 0;
color: #1a1a1a;
font-size: 24px;
max-width: 800px;
}
.panel p:last-child {
margin-bottom: 0;
}
.panel__block {
height: 3px;
background: rgba(0, 0, 0, 0.2);
margin: 0 0 25px 0;
}
@media (max-width: 640px) {
.panel__headline {
font-size: 36px;
}
.panel__wrapper {
padding: 10vh 10vw;
}
.panel p {
font-size: 16px;
}
}

.c-blue {
color: #5fc7ea;
}

.c-red {
color: #e68568;
}

.c-green {
color: #68e6ac;
}

.c-yellow {
color: #e6d068;
}

.b-blue {
background: #5fc7ea;
}

.b-red {
background: #e68568;
}

.b-green {
background: #68e6ac;
}

.b-yellow {
background: #e6d068;
}

.logo {
position: fixed;
bottom: 3vh;
right: 3vw;
z-index: 2;
}
.logo img {
width: 65px;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: rotate(0);
transform: rotate(0);
}
.logo img:hover {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}

</style>

<script>
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();

var openMenu = function() {
burger.classList.toggle('burger--active');
menu.classList.toggle('nav__list--active');
};

// reveal content of first panel by default
panel.eq(0).find('.panel__content').addClass('pane l__content--active');

var scrollFx = function() {
var ds = doc.scrollTop();
var of = vh / 4;

// if the panel is in the viewport, reveal the content, if not, hide it.
for (var i = 0; i < panel.length; i++) {
if (panel.eq(i).offset().top < ds+of) {
panel
.eq(i)
.find('.panel__content')
.addClass('panel__content--active');
} else {
panel
.eq(i)
.find('.panel__content')
.removeClass('panel__content--active')
}
}
};

var scrolly = function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 300, 'swing', function () {
window.location.hash = target;
});
}

var init = function() {
burger.addEventListener('click', openMenu, false);
window.addEventListener('scroll', scrollFx, false);
window.addEventListener('load', scrollFx, false);
$('a[href^="#"]').on('click',scrolly);
};

doc.on('ready', init);
</script>

</body>
</html>
Questo sarebbe tutto il codice se ho capito bene, cioè devo solo inserire il contenuto della cartella JS nella tag script e il contenuto del css in style?

**Giacomara** · 31-07-2017, 13:15

Ho provato, ma forse per la foga di inserire un qualcosa di nuovo ho capito poco e niente
questo ï¿½ il codice che ho in uso
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body {
background-image: url(castello.jpg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: ; /* optional, center the image */

}
* {
box-sizing: border-box;
}

body {
font-family: 'Montserrat';
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 85vh;
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav__list--active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav__item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
.nav__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
font-size: 24px;
background: #2b3033;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav__link:hover {
background: #272b2e;
}
@media (max-width: 640px) {
.nav {
width: 70px;
}
.nav__list {
height: 90vh;
}
}

.burger {
height: 15vh;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 2;
background: #2b3033;
cursor: pointer;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger:hover {
background: #272b2e;
}
.burger__patty {
position: relative;
height: 2px;
width: 40px;
background: white;
}
.burger__patty:before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty:after {
content: "";
position: absolute;
top: 10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty, .burger__patty:before, .burger__patty:after {
will-change: transform;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger--active .burger__patty {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.burger--active .burger__patty:before {
-webkit-transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}
.burger--active .burger__patty:after {
-webkit-transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}
@media (max-width: 640px) {
.burger {
height: 10vh;
}
.burger__patty {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.burger--active .burger__patty {
-webkit-transform: scale(0.ðŸ˜Ž rotate(90deg);
transform: scale(0.ðŸ˜Ž rotate(90deg);
}
}

.panel {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.panel__wrapper {
padding: 7vh 7vw;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.panel__content {
will-change: transform;
-webkit-transform: scale(0.7) rotateX(-230deg);
transform: scale(0.7) rotateX(-230deg);
-webkit-transform-origin: center 80%;
transform-origin: center 80%;
opacity: 0;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel__content--active {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.panel__headline {
font-weight: 700;
opacity: 0.8;
font-size: 48px;
margin: 0 0 25px 0;
}
.panel p {
margin: 0 0 25px 0;
color: #1a1a1a;
font-size: 24px;
max-width: 800px;
}
.panel p:last-child {
margin-bottom: 0;
}
.panel__block {
height: 3px;
background: rgba(0, 0, 0, 0.2);
margin: 0 0 25px 0;
}
@media (max-width: 640px) {
.panel__headline {
font-size: 36px;
}
.panel__wrapper {
padding: 10vh 10vw;
}
.panel p {
font-size: 16px;
}
}

.c-blue {
color: #5fc7ea;
}

.c-red {
color: #e68568;
}

.c-green {
color: #68e6ac;
}

.c-yellow {
color: #e6d068;
}

.b-blue {
background: #5fc7ea;
}

.b-red {
background: #e68568;
}

.b-green {
background: #68e6ac;
}

.b-yellow {
background: #e6d068;
}

.logo {
position: fixed;
bottom: 3vh;
right: 3vw;
z-index: 2;
}
.logo img {
width: 65px;
-webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: rotate(0);
transform: rotate(0);
}
.logo img:hover {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}

</style>

<script>
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();

var openMenu = function() {
burger.classList.toggle('burger--active');
menu.classList.toggle('nav__list--active');
};

// reveal content of first panel by default
panel.eq(0).find('.panel__content').addClass('pane l__content--active');

var scrollFx = function() {
var ds = doc.scrollTop();
var of = vh / 4;

// if the panel is in the viewport, reveal the content, if not, hide it.
for (var i = 0; i < panel.length; i++) {
if (panel.eq(i).offset().top < ds+of) {
panel
.eq(i)
.find('.panel__content')
.addClass('panel__content--active');
} else {
panel
.eq(i)
.find('.panel__content')
.removeClass('panel__content--active')
}
}
};

var scrolly = function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 300, 'swing', function () {
window.location.hash = target;
});
}

var init = function() {
burger.addEventListener('click', openMenu, false);
window.addEventListener('scroll', scrollFx, false);
window.addEventListener('load', scrollFx, false);
$('a[href^="#"]').on('click',scrolly);
};

doc.on('ready', init);
</script>

</body>
</html>
Ho seguito il tuo consiglio, ho usato solo i file Css e Js, solo che non mi legge niente...

Discussione: Inserimento di JQuery

Strumenti discussione

Ricerca discussione

Visualizza

Inserimento di JQuery

Permessi di invio