• 09-02-2020, 13:04:37
    #1
    Merhaba herkese iyi forumlar.

    Html/css yeni yeni öğreniyorum ve bir yerde takıldım. Yardımcı olursanız makbule geçer.

    <form action="#">
    
    <div class="select-box">
    
    <label for="select-box1" class="label select-box1"><span class="label-desc">Choose your country</span></label>
    <select id="select-box1" class="select">
    <option value="Choice 1">Falkland Islands</option>
    <option value="Choice 2">Germany</option>
    <option value="Choice 3">Neverland</option>
    </select>
    
    </div>
    
    </form>
    css ve js ile çalışan bu kodun html bölümünde Option value bölümüne link eklemek istiyorum. Yani Germany e tıklayan birisi verdiğim link bölümüne gidecek. Nasıl yapılıyor kafam karıştı.Teşekkürler
  • 09-02-2020, 13:17:34
    #2
    <option value="Choice 2"><a href="link">Germany</a></option>

    sanırım böyle olması lazım

    edit option muş emin değilim
  • 09-02-2020, 13:20:38
    #3
    Üyeliği durduruldu
    Merhabalar hocam. Şu şekilde yapabilme şansın mevcut fakat pek önermiyorum.
       <select name="forma" onchange="location = this.value;">
            <option value="Falkland.php">Falkland Islands</option>
            <option value="Germany.php">Germany</option>
            <option value="Neverland.php">Neverland</option>
           </select>
  • 09-02-2020, 13:25:08
    #4
    UmutcanAras adlı üyeden alıntı: mesajı görüntüle
    <option value="Choice 2"><a href="link">Germany</a></option>

    sanırım böyle olması lazım

    edit option muş emin değilim
    K4R4N1 adlı üyeden alıntı: mesajı görüntüle
    Merhabalar hocam. Şu şekilde yapabilme şansın mevcut fakat pek önermiyorum.
     <select name="forma" onchange="location = this.value;">
    <option value="Falkland.php">Falkland Islands</option>
    <option value="Germany.php">Germany</option>
    <option value="Neverland.php">Neverland</option>
    </select>

    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
    
    body {
    background: #ffffff;
    color: #414141;
    font: 400 17px/2em 'Source Sans Pro', sans-serif;
    }
    
    .select-box {
    cursor: pointer;
    position : relative;
    max-width: 20em;
    margin: 5em auto;
    width: 100%;
    }
    
    .select,
    .label {
    color: #414141;
    display: block;
    font: 400 17px/2em 'Source Sans Pro', sans-serif;
    }
    
    .select {
    width: 100%;
    position: absolute;
    top: 0;
    padding: 5px 0;
    height: 40px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    background: none transparent;
    border: 0 none;
    }
    .select-box1 {
    background: #ececec;
    }
    
    .label {
    position: relative;
    padding: 5px 10px;
    cursor: pointer;
    }
    .open .label::after {
    content: "▲";
    }
    .label::after {
    content: "▼";
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 15px;
    border-left: 5px solid #fff;
    }
    $("select").on("click" , function() {
    
    $(this).parent(".select-box").toggleClass("open");
    
    });
    
    $(document).mouseup(function (e)
    {
    var container = $(".select-box");
    
    if (container.has(e.target).length === 0)
    {
    container.removeClass("open");
    }
    });
    
    
    $("select").on("change" , function() {
    
    var selection = $(this).find("option:selected").text(),
    labelFor = $(this).attr("id"),
    label = $("[for='" + labelFor + "']");
    
    label.find(".label-desc").html(selection);
    
    });
    js css kodlarını ekledim. Hala bir yol bulamadım
  • 09-02-2020, 13:28:04
    #5
    Üyeliği durduruldu
    yazarbey adlı üyeden alıntı: mesajı görüntüle
    @import url([url]https://fonts.googleapis.com/css?family=Source+Sans+Pro);[/url]
    
    body {
    background: #ffffff;
    color: #414141;
    font: 400 17px/2em 'Source Sans Pro', sans-serif;
    }
    
    .select-box {
    cursor: pointer;
    position : relative;
    max-width: 20em;
    margin: 5em auto;
    width: 100%;
    }
    
    .select,
    .label {
    color: #414141;
    display: block;
    font: 400 17px/2em 'Source Sans Pro', sans-serif;
    }
    
    .select {
    width: 100%;
    position: absolute;
    top: 0;
    padding: 5px 0;
    height: 40px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    background: none transparent;
    border: 0 none;
    }
    .select-box1 {
    background: #ececec;
    }
    
    .label {
    position: relative;
    padding: 5px 10px;
    cursor: pointer;
    }
    .open .label::after {
    content: "▲";
    }
    .label::after {
    content: "▼";
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 15px;
    border-left: 5px solid #fff;
    }
    $("select").on("click" , function() {
    
    $(this).parent(".select-box").toggleClass("open");
    
    });
    
    $(document).mouseup(function (e)
    {
    var container = $(".select-box");
    
    if (container.has(e.target).length === 0)
    {
    container.removeClass("open");
    }
    });
    
    
    $("select").on("change" , function() {
    
    var selection = $(this).find("option:selected").text(),
    labelFor = $(this).attr("id"),
    label = $("[for='" + labelFor + "']");
    
    label.find(".label-desc").html(selection);
    
    });
    js css kodlarını ekledim. Hala bir yol bulamadım
    Dediğim gibi yaptın mı hocam?
  • 09-02-2020, 13:32:39
    #6
    K4R4N1 adlı üyeden alıntı: mesajı görüntüle
    Dediğim gibi yaptın mı hocam?
    Blogger temada çalışacak bu kod o yüzden php olmuyor. Yani html üzerinden bu menuye link vermem lazım
  • 09-02-2020, 13:35:09
    #7
    Üyeliği durduruldu
    yazarbey adlı üyeden alıntı: mesajı görüntüle
    Blogger temada çalışacak bu kod o yüzden php olmuyor. Yani html üzerinden bu menuye link vermem lazım
    Ne farkederki hocam Buyurun böyle deneyin.
        <select name="forma" onchange="location = this.value;">
            <option value="Falkland.html">Falkland Islands</option>
            <option value="Germany.html">Germany</option>
            <option value="Neverland.html">Neverland</option>
           </select>




    Arkadaşla Pm üzerinden konuştuk soruna çözüm getirdiğimi düşünüyorum. PM de kod önizlemesi olmadığı için ve başkalarınında faydalanması için eklemeye karar verdim. Buradan indirebilirsiniz https://s4.dosya.tc/server9/nucyja/option.zip.html
    NOT: JS ve CSS kodlarını dışarıdan çağırdım. Kodları buradan yayımlayamadığım için indirme linki koydum.