Sayfalar arası geçiş önerisi

111520 · 6 Aralık 2023

Görseldeki gibi bir header olacak ve tıkladığımda o linkteki içerikler gözükecek sayfada. Hepsinde bir kaç adet fotoğraf olacak, büyük bir şey değil. index dosyasının içinde mi yapmak mantıklı yoksa ayrıca hepsine tek tek sayfa açıp onun içinde mi çalışmak daha sağlıklı?

534747 · 6 Aralık 2023

Ayrı sayfalarda çalışmak daha sağlıklı olacaktır. Mesela burada konu açarken açılan sayfa normalde ayrı bir sayfa. Iframe özelliği ile sayfa içinde sayfa olarak açılıyor.

ququleta · 6 Aralık 2023

Hocam sana tavsiyem ayrı ayrı yapman. İleride siteni büyütürsen çok sıkıntı çekebilirsin. Farklı linklere vermek işini kolaylaştırır.

TheAny · 6 Aralık 2023

jQuery ile sayfa yükleyebilirsin. id'den nesneyi divine göre temizler oynar durursun. Örnek olması için şöyle vereyim mesela;

script.js;

JavaScript:

let page = document.getElementById("page");
let anasayfa = document.getElementById("anasayfa");
let hakkinda = document.getElementById("hakkinda");

function pageLoad(pageName, caller) {
    document.querySelectorAll("#navbar .btn").forEach(element => {
        element.classList.remove("active");
    })
    caller.classList.add("active");
    page.innerHTML = "";
    $("#page").load(pageName + ".html");
}
anasayfa.addEventListener("click", () => {
    pageLoad("anasayfa", anasayfa);
})

hakkinda.addEventListener("click", () => {
    pageLoad("hakkinda", hakkinda);
})

index.html;

HTML:

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
    <div class="p-3 d-flex justify-content-center">
        <div class="btn-group" role="group" id="navbar">
            <a class="btn btn-light" id="anasayfa">Anasayfa</a>
            <a class="btn btn-light" id="hakkinda">Hakkında</a>
            <a class="btn btn-light" id="iletisim">İletişim</a>
        </div>
    </div>
    <div class="m-3 card">
        <div class="card-body">
            <div class="d-flex" id="page">
            </div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

Not: Linklerin bir kısmı bootstrap için. Tasarımla uğraşmak istemediğimden fakat yine de kolayca görünsün istediğimden ekliyorum.

Sayfalar arası geçiş önerisi

111520

Megapat

534747

Hectopat

ququleta

Centipat

TheAny

Gigapat