const nav = document.querySelector('.navLinkovi');
const otvorenMeni = document.querySelector('#otvoren');
const zatvorenMeni = document.querySelector('#zatvoren');
const otvoriMeni = () => {
nav.style.display = 'flex';
otvorenMeni.style.display = 'none';
zatvorenMeni.style.display = 'inline-block';
}
otvoren.addEventListener('click', otvoriMeni);
const zatvoriMeni = () => {
nav.style.display = 'none';
otvorenMeni.style.display = 'inline-block';
zatvorenMeni.style.display = 'none';
}
zatvoren.addEventListener('click', zatvoriMeni);
:root {
--color-primary: #FF7000;
--color-primary-variant: #e5a55d;
--color-bg-1: #000e17;
--color-bg-2: #001e2d;
--color-bg-3: #012734;
--color-bg-4: #003347;
--color-light: #85a2b2;
--color-white: #fff;
--container-width-lg: 88%;
--container-width-md: 92%;
--transition: all 400ms ease;
}
@font-face { font-family: Poppins; src: url('Poppins-Regular.ttf'); }
@font-face { font-family: Poppins; font-weight: regular; src: url('Poppins-Regular.ttf');}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: #012734;
color: #fff;
line-height: 1.7;
}
h1, h2 {
line-height: 1.1;
font-weight: 400;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3.5rem;
}
a {
color: #fff;
transition: all 400ms ease;
}
a:hover {
color: #FF7000;
}
.kontejner {
width: 88%;
margin: 0 auto;
max-width: 2160px;;
}
img {
display: block;
object-fit: cover;
width: 100%;
}
nav {
height: 5rem;
width: 100vw;
display: grid;
place-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.nav2 {
background-color: #001e2d;
border-bottom: 0.2rem solid #003347;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
}
.navKontejner {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.navMeni {
display: none;
background: transparent;
}
.navMeni img {
width: 30px;
height: 30px;
}
.logo {
width: 5.5rem;
}
.navLinkovi {
display: flex;
gap: 4rem;
}
.navSkrol {
background-color: #001e2d;
border-bottom: 0.2rem solid #003347;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
}
.slajdovi {
display: none;
}
.slajdovi img {
max-width: 1000px;
max-height: 500px;
display: block;
margin: auto;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
}
.slajder {
max-width: 80%;
position: relative;
margin: auto;
margin-top: 80px;
padding-bottom: 40px
}
header {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
background-color: #001e2d;
border-top: 0.5rem solid #003347;
}
.headerKontejner {
display: grid;
grid-template-columns: 40% 40%;
gap: 10%;
position: relative;
}
.headerSlika {
width: 29rem;
position: relative;
top: 2rem;
left: 8rem;
}
.desno {
display: flex;
justify-content: center;
flex-direction: column;
}
.desno h1 {
text-shadow: 2px 2px 8px rgb(78, 81, 230);
}
.desno p {
width: 85%;
}
footer {
border-top: 0.5rem solid #003347;
}
.footerKontejner {
padding-top: 5rem;
}
.footer {
display: flex;
align-items: center;
}
.footerLinkovi {
margin: 3rem 0 5rem;
display: flex;
align-items: center;
gap: 5rem;
}
/* ---------- O MENI ---------- */
.omeniKontejner {
margin-top: 300px;
margin-bottom: 150px;
padding-left: 250px;
display: grid;
grid-template-columns: 26rem auto;
gap: 3rem;
position: relative;
}
.naslov {
position: absolute;
top: -7rem;
left: 7rem;
z-index: 1;
}
.omeniSlika {
position: relative;
}
.slikaIza {
width: 16rem;
height: 24rem;
position: absolute;
bottom: 0;
background-color: #003347;
}
.slikaVelika {
position: relative;
left: 1rem;
bottom: 1rem;
filter: saturate(0) brightness(0.3);
transition: 500ms ease;
}
.slikaMala {
position: absolute;
top: 3rem;
left: 8rem;
height: 22rem;
width: 22rem;
overflow: hidden;
box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, 0.2);
transition: 500ms ease;
}
.omeniSlika:hover .slikaMala {
opacity: 0;
}
.omeniSlika:hover .slikaVelika {
filter: saturate(1) brightness(1);
box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.2);
border: 1rem solid #003347;
left: 0;
bottom: 0;
}
.omeniDesno {
margin-left: 10rem;
}
.omeniDesno p {
margin: 0 4rem 1.5rem 0rem;
width: 60%;
}
/* ---------- GALERIJA ---------- */
.galerijaKontejner {
margin-top: 150px;
margin-bottom: 150px;
position: relative;
}
.galerija {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.galerija img {
height: 100%;
transition: all 400ms ease;
}
.galerija article {
border: 0.5rem solid #003347;
transition: all 400ms ease;
}
.galerija article:hover img {
box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}
/* ---------- KONTAKT ---------- */
.kontakt {
margin-top: 130px;
}
form {
background: #003347;
width: 640px;
margin: 50px auto;
max-width: 97%;
border-radius: 4px;
padding: 55px 30px;
}
.kontaktNaslov h2 {
letter-spacing: 6px;
border-bottom: 1px solid white;
display: inline-block;
padding-bottom: 8px;
margin-bottom: 32px;
}
.polovina {
display: flex;
justify-content: space-between;
}
.stavka {
display: flex;
flex-direction: column;
margin-bottom: 24px;
width: 48%;
}
form label {
display: block;
font-size: 16px;
letter-spacing: 3.5px;
margin-bottom: 5px;
}
.polovina input {
border-radius: 4px;
border: 1px solid white;
outline: 0;
padding: 16px;
width: 100%;
height: 44px;
background: transparent;
font-size: 16px;
color: white;
}
.celo {
margin-bottom: 24px;
}
.celo textarea {
background: transparent;
border-radius: 4px;
border: 1px solid white;
outline: 0;
padding: 12px 16px;
width: 100%;
height: 200px;
font-size: 16px;
color: white;
}
.dugme {
margin-bottom: 32px;
}
.dugme input {
background: transparent;
border-radius: 4px;
border: 1px solid white;
cursor: pointer;
font-size: 14px;
font-weight: 600;
height: 44px;
letter-spacing: 3px;
outline: 0;
padding: 0 20px 0 22px;
margin-right: 10px;
}
.dugme input[type="submit"], input[type="reset"]{
background: white;
color: black;
transition: all 400ms ease;
}
.dugme input:hover {
transform: scale(1.1);
}
.stavka input:focus, .celo textarea:focus{
background: #025069;
}
.ikonice {
display: flex;
gap: 1rem;
}
.ikonice img {
height: 40px;
width: 40px;
}
/* ---------- RESPONZIVNOST (tablet) ---------- */
@media screen and (max-width: 1024px) {
.kontejner {
width: 92%;
position: relative;
}
h1 {
font-size: 2.5rem;
line-height: 1.3;
}
h2 {
font-size: 2.5rem;
}
.navLinkovi {
position: absolute;
top: 100%;
right: 0;
flex-direction: column;
gap: 0;
display: none;
}
.navLinkovi li {
height: 5rem;
box-shadow: -3rem 3rem 3rem rgba(0, 0, 0, 0.7);
}
.navLinkovi li a {
background: #003347;
height: 100%;
width: 100%;
display: flex;
align-items: center;
padding: 1rem 5rem 1rem 3rem;
border-top: 1px solid #001e2d;
}
.navMeni {
display: inline-block;
font-size: 2rem;
cursor: pointer;
}
#zatvoren {
display: none;
}
.slajdovi img {
max-width: 600px;
max-height: 300px;
}
header {
height: fit-content;
padding: 14rem 0 12rem;
display: grid;
place-items: center;
}
.headerKontejner {
grid-template-columns: 40% 54%;
gap: 6%;
margin: 0;
}
.headerSlika {
width: 100%;
top: 0;
left: 0;
}
.desno p {
width: 100%;
}
.omeniKontejner {
grid-template-columns: 40% 54%;
gap: 6%;
padding-left: 50px;
}
.slikaIza, .slikaMala {
display: none;
}
.slikaVelika {
left: 0;
top: 0;
filter: saturate(1) brightness(1);
}
.slikaVelika:hover {
border: none;
}
.omeniDesno {
margin: 0;
}
.omeniDesno p {
margin-bottom: 1rem;
width: 90%;
}
.galerijaKontejner {
width: 90%;
}
.galerija {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---------- RESPONZIVNOST (telefon) ---------- */
@media (max-width: 600px) {
h1, h2 {
font-size: 2rem;
line-height: 1.3;
}
.slajdovi img {
max-width: 500px;
max-height: 180px;
}
header {
padding: 0;
padding-bottom: 6rem;
}
.headerKontejner {
grid-template-columns: 1fr;
gap: 1rem;
text-align: center;
}
.headerSlika {
width: 70%;
height: 70%;
margin: 0 auto;
margin-top: 7rem;
overflow: hidden;
}
.desno p {
margin-top: 1rem;
}
.omeniKontejner {
grid-template-columns: 1fr;
gap: 2rem;
padding-left: 10px;
margin-top: 230px;
}
.omeniDesno p {
width: 100%;
}
.omeniSlika {
display: flex;
justify-content: center;
align-items: center;
}
.slikaVelika {
height: 50%;
width: 50%;
}
.slikaIza, .slikaMala {
display: none;
}
.omeniSlika:hover .slikaVelika {
filter: saturate(1) brightness(1);
box-shadow: 0 0 0 0;
border: none;
}
.polovina {
flex-direction: column;
}
.stavka {
width: 100%;
}
.dugme {
display: flex;
flex-direction: column;
}
.dugme input {
margin-bottom: 10px;
width: 100%;
}
.footer h2 {
font-size: 1.5rem;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
}
.footerLinkovi {
flex-direction: column;
gap: 1rem;
margin-top: 5rem;
}
}
/* ---------- SVETLA TEMA ---------- */
.dark-mode {
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nikola Photo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="kontejner navKontejner">
<a href="index.html" class="logo"><img src="slike/logo.png" alt="logo"></a>
<ul class="navLinkovi">
<li><a href="index.html">Pocetna</a></li>
<li><a href="galerija.html ">Galerija</a></li>
<li><a href="omeni.html">O meni</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<button class="navMeni" id="otvoren"><img src="slike/hamburger.png" alt=""></button>
<button class="navMeni" id="zatvoren"><img src="slike/xicon.png" alt=""></button>
</div>
</nav>
<div class="slajder">
<div class="slajdovi">
<img src="slike/slika10.png" alt="">
</div>
<div class="slajdovi">
<img src="slike/slika11.png" alt="">
</div>
<div class="slajdovi">
<img src="slike/slika17.jpg" alt="">
</div>
</div>
<header id="header">
<div class="kontejner headerKontejner">
<div class="levo">
<div class="headerSlika">
<img src="slike/slika8.png" alt="pariz">
</div>
</div>
<div class="desno">
<h1>NikolaPhoto</h1><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente ut praesentium assumenda cum et? Fugit quae dolor animi enim eveniet, alias hic nulla eius nam accusamus facilis asperiores rerum odit.</p>
</div>
</div>
</header>
<footer>
<div class="kontejner footerKontejner">
<div class="footer">
<h2 class="footerNaslov">kontakt@nikolaphoto.com</h2>
</div>
<ul class="footerLinkovi">
<li><a href="index.html">Pocetna</a></li>
<li><a href="galerija.html ">Galerija</a></li>
<li><a href="omeni.html">O meni</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<button type="button" onclick="themeToggle()">Theme Toggle</button><div id="theme"></div>
</footer>
<script src="script.js"></script>
</body>
</html>
我有一个javascript函数,可以打开/关闭汉堡菜单,在主页上工作正常,但在其他任何页面上都不起作用。所有页面都使用相同的导航(包括汉堡包按钮)和相同的js文件。把代码给了一个朋友,在他的网站上运行良好。
编辑:在最初的帖子中,我包含了一个完全错误的js函数,现在改变了它。
这个代码片段似乎工作(汉堡包是在左上角),它确实为我工作,但正如我所说,只有在主页上,我有3个页面与相同的导航,它不工作。
2条答案
按热度按时间rjee0c151#
1.如果你还没有这样做的话,你应该在head标签中包含js文件。
1.不能有包含类名 “slajdovi” 的元素。使用console.log检查函数是否运行。
快乐编码!
wz8daaqr2#
为汉堡菜单函数创建一个新的js文件,并将其包含在所有页面中,似乎可以修复它,我不知道为什么当我在主js文件中使用相同的函数时,它不起作用。