https://codepen.io/ebykdrms/pen/KKQoNJL

JQuery ile örnek kod hazırladım. İnceleyebilirsiniz:

<button id="open-sign-popup">Login / Sign Up</button>
<div id="sign-popup" class="my-popup">
    <div class="my-popup-backdrop"></div>
    <div class="my-popup-window">
        <div class="my-popup-tabs">
            <div class="my-popup-tab active">Oturum Aç</div>
            <div class="my-popup-tab">Kayıt Ol</div>
        </div>
        <div id="sign-up" class="my-popup-tab-content">
            <h1>Oturum Aç</h1>
            <p>Buraya oturum açma formu gelecek.</p>
        </div>
        <div id="sign-in" class="my-popup-tab-content active">
            <h1>Kayıt Ol</h1>
            <p>Buraya kayıt olma formu gelecek.</p>
        </div>
    </div>
</div>

.my-popup {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    z-index:-1;
    pointer-events:none;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity ease .3s, z-index .3s linear 0s;
}
.my-popup.active {
    z-index:500;
    opacity:1;
    pointer-events:auto;
}
.my-popup > .my-popup-backdrop {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    background:#00000080;
}
.my-popup > .my-popup-window {
    position:relative;
    z-index:2;
    background:#fff;
    display:flex;
    flex-direction:column;
    border-radius:10px;
    box-shadow:0 5px 20px #00000040;
    width:500px;
    max-width:95%;
    transform:scale(0.95);
    transition:transform ease .3s;
}
.my-popup.active > .my-popup-window {
    transform:scale(1);
}
.my-popup > .my-popup-window > .my-popup-tabs {
    display:flex;
    flex-directon:row;
    width:100%;
}
.my-popup > .my-popup-window > .my-popup-tabs > .my-popup-tab {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px 15px;
    cursor:pointer;
    color:#777;
    font-weight:bold;
}
.my-popup > .my-popup-window > .my-popup-tabs > .my-popup-tab.active {
    color:#000;
}
.my-popup .my-popup-window > .my-popup-tab-content {
    display:flex;
    visibility:hidden;
    height:0;
    opacity:0;
    pointer-events:none;
}
.my-popup .my-popup-window > .my-popup-tab-content.active {
    visibility:visible;
    flex-direction:column;
    height:auto;
    padding:15px;
    transition:opacity ease .3s;
    opacity:1;
    pointer-events:auto;
}

const $signPopup = $("#sign-popup");

// Butona tıklandığında popup'ımıza active class'ı basılsın. Böylece popup açılmış olacka.
$("#open-sign-popup").on("click",function(){ $signPopup.addClass("active"); });

// popup'taki siyah arkaplana tıklanırsa popup kapansın.
$signPopup.on("click", ".my-popup-backdrop", function() {
    const $contents = $(this).closest(".my-popup").removeClass("active");
});

// popup'taki sekmelere tıklanınca, sekmeyle aynı sıradaki içerik görüntülensin.
$signPopup.on("click", ".my-popup-tabs > .my-popup-tab", function() {
    const $thisTab = $(this);
    $thisTab.siblings().removeClass("active");
    $thisTab.addClass("active");
    // Tıklanan sekmenin kaçıncı sırada olduğunu bul:
    const indexOfThisTab = $thisTab.index();
    const $contents = $thisTab.closest(".my-popup-window").find(".my-popup-tab-content");
    // Tıklanan sekme kaçıncı sıradaysa o sıradaki içeriği aktif et.
    $contents.removeClass("active").eq(indexOfThisTab).addClass("active");
});

Burada JQuery ile sadece neye ne zaman active class'ı verileceğini ayarladık. Animasyon işini tamamen CSS'e bıraktık.

Sorunu daha net açıklar mısınız?
İsteğiniz: Kullanıcının tarayıcısı Türkçeyse hiçbir şey olmasın. Değilse /en sayfasına yönlensin.
Sorununuz: Kullanıcının tarayıcısı İngilizceyse (Türkçe değilse) /en adresine yönleniyor.
Zaten istediğiniz şey olmuyor mu?

Öncelikle yönlendirme işlemini front-end kısmında değil back-end kısmında yapmanızı tavsiye ederim.
Front-end kısmında yapacaksanız, kullanıcının tarayıcısına 3-4 şekilde veri eklemeniz mümkün: Local Storage, Session Storage, IndexedDB, Cookies.
Bunlardan birine istediğiniz bir veriyi ekleyebilir ve ziyaretçiler her geldiğinde bu verinin varlığını kontrol edebilirsiniz. Böylece bu tarayıcıda tek seferlik çalışacak kodlar yazmanız mümkün olur.
Örneğin:

// Local Storage'deki "isFirst" key'inin değerini alalım.
let isFirst = localStorage.getItem("isFirst");

// Eğer aldığımız değer null ise bu tarayıcıya daha önce girilmediğini anlıyoruz.
if(!isFirst) {
    // Local Storage'deki "isFirst" key'ine bir değer yazalım.
    // Böylece birdahaki istekte "isFirst" key'i boş olmayacağı için ziyaretçinin ilk kez gelmediğini anlayabileceğiz.
    localStorage.setItem("isFirst", "1");
    
    // Böylece mesela ilk kez siteye giriş yapan birine "Seninle tanıştığıma memnun oldum" diyebiliriz.
    const browserLang = navigator.language || navigator.userLanguage;
    if(browserLang == "tr-TR" || browserLang == "tr") alert("Seninle tanıştığıma memnun oldum!");
    else alert("I'm glad to meet you!");
}

Belki bu örnek yapmak istediğiniz şeyle ilgili ipucu verir.

Eğer siz kullanıcının tarayıcı diline göre Türkçe sayfaya hiç uğramadan /en'e gitmesini istiyorsanız bunu back-end tarafında çözmelisiniz.
Örneğin PHP ile tarayıcı dilini yakalamak için aşağıdaki gibi bir kod kullanabilirsiniz:

<?php
    $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
    $acceptLang = ['fr', 'it', 'en']; 
    $lang = in_array($lang, $acceptLang) ? $lang : 'en';
    require_once "index_{$lang}.php"; 
?>

Kaynak: stackoverflow

Bu kadar yardımcı olabiliyorum...

SELECT * FROM categories WHERE id = ? sorgunuz yeterli olmalı.
Eğer categories tablonuzda category_id diye bir sütununuz varsa bu zaten dönecektir.

Veritabanına döngü içinde çok sayıda istek atmamanızı öneririm. Nasıl bir istek atacaksanız onu PHP ile kurgulayıp veritabanından tek seferde cevap almaya çalışmanız veritabanını daha az yoracaktır.
Aşağıdaki örnekte 4 kategoriniz varmış gibi düşünelim.
Veritabanına foreach içinde istek atmayı kaldırdığımız için veritabanına 4 kez istek atmak yerine sadece 1 kez istek atabilecek hale getirmiş oluyoruz. posts tablosuna attığımız istekle birlikte 5 yerine 2 istekte veritabanından sonuçlarımızı alabiliyoruz.

 function getUrl($url){
    global $db;
 
    $query = $db->prepare('SELECT * FROM posts WHERE url = ?');
    $query->execute([$url]);
    $data = $query->fetch(PDO::FETCH_ASSOC);
    
    $idValues = [];
    foreach($data as $dataItem) $idValues[] = "id = $dataItem["id"]";
    // $idValues dizisi içinde şuna benzer bir veri oluştu: ["id=1", "id=2", "id=4", "id=12"]
    
    $idValues = implode(" OR ", $idValues);
    // $idValues şu string'e döndü: "id=1 OR id=2 OR id=4 OR id=12"
    
    $query = $db->prepare("SELECT * FROM categories WHERE $idValues");
    $query->execute();
    $categories = $query->fetchAll();

    return $categories;
}

$cats = getUrl("url verisi");
echo "ilk category_id verisi: ".$cats[0]->category_id;

Aslında daha da ileri gidip tek sorguda iki tabloyu birleştirerek sonuç almak en güzel.

5.satırda string'inizi bitirmişsiniz sonra birleştirme operatörü (nokta) kullanmadan 6.satırda yeni bir string'e başlamışsınız.
5.satırın sonuna nokta koyarsanız düzelecektir. Ama benim tavsiyem:
Verileri satır satır olacak şekilde bir değişkende birleştirin. Kafanız karışmasın.

$html = '';
foreach ($sorgu as $deg) {
    $html .= '<div class="kutu">';
    $html .= '    <div class="icerik">';
    $html .= '        <a href="#">';
    $html .= '            <img src="' . $deg['kapakresmi'] . '" alt="">';
    $html .= '            <p>' . $deg['konu'] . '</p>';
    $html .= '        </a>';
    $html .= '    </div>';
    $html .= '</div>';
}
echo $html;

2012 yılında stackoverflow.com üzerinde sorunuza cevap verilmiş.

Web Sitesinde Bildirim Sesi Nasıl Verilir?

Belirli bir olay geliştiğinde web sitemin kullanıcıya bir bildirim sesi çıkarmasını istiyorum.
Sayfa açıldığında ses otomatik olarak oynatılmamalıdır. Bunun yerine bir olay gerçekleştiğinde javascript ile devreye sokulmalıdır.
Bunun eski tarayıcılarda (IE 6 gibi) çalışması da gerekiyor.
Yani basitçe 2 sorum var:

• Hangi codec bileşenini kullanmalıyım?
• Ses dosyasını gömmek için en iyi yol nedir? (<embed>, <object>, <audio>, Flash...)

Doğru Cevap

2021 Çözümü

function sesOynat(url) {
  const audio = new Audio(url);
  audio.play();
}

<button onclick="sesOynat('https://dosyaniz.mp3');">Oynat</button>

Tarayıcı Desteği

Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, Chrome

Codec Desteği

Sadece mp3

Eski Çözüm

(eski tarayıcılar için)

function sesOynat(dosyaAdi){
  var mp3Source = '<source src="' + dosyaAdi + '.mp3" type="audio/mpeg">';
  var oggSource = '<source src="' + dosyaAdi + '.ogg" type="audio/ogg">';
  var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + dosyaAdi +'.mp3">';
  document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}

<button onclick="sesOynat('bing');">Oynat</button>  
<div id="sound"></div>

Tarayıcı Desteği

• <audio> Modern tarayıcılar için
• <embed> Eski tarayıcılar için

Codec Kullanımı

• Chrome, Safari ve Internet Explorer için MP3
• Firefox ve Opera için OGG