Změna velikosti písma

Drobečková navigace

CSS blog > Záložky

Záložky



 

Naším novým Antee trendem jsou tzv. záložky.

Využítí je mnoho:

Navigace

Příklad v praxi

HTML pro záložky

<ul class="zalozky-menu">
    <li class="tab-pondeli" data-name="pondeli"><a href="#">A</a></li>
    <li class="tab-utery" data-name="utery"><a href="#">B</a></li>
    <li class="tab-streda" data-name="streda"><a href="#">C</a></li>
</ul>
<div class="zalozky-content">
    <div id="tab-pondeli">AAAAAA</div>
    <div id="tab-utery">BBBBBB</div>
    <div id="tab-streda">CCCCCC</div>
</div>

 

CSS pro záložky

Jedná se o jednuché stylování záložek:

.zalozky-menu {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #8c8c8c;
}

.zalozky-menu li {
    float: left;
    padding-bottom: 0;
    margin-right: 12px;
}

.zalozky-menu a {
    position: relative;
    background-color: #b9b9b9;
    padding: .9em 4em;
    float: left;
    text-decoration: none;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
}

.zalozky-menu a:hover,
.zalozky-menu a:focus,
.zalozky-menu li#current a {
    background-color: #8c8c8c;
    color: #ffffff;
}

.zalozky-menu a:visited {
    color: white;
}

.zalozky-menu a:focus {
    outline: 0;
}

.zalozky-menu #current a {
    background: #fff;
    color: #003f7d;
}

.zalozky-content {
    padding: 15px 0;
}

Javascript pro záložky bez kotvy

<script type="text/javascript">
     $(document).ready(
        function() {
            $(".zalozky-menu a").click(
                function(e) {
                    e.preventDefault();
                    if ($(this).closest("li").attr("id") != "current") {
                        $(".zalozky-content").find("div[id^='tab']").hide();
                        $(".zalozky-menu li").attr("id", "");
                        $(this).parent().attr("id", "current");
                        $('#tab-' + $(this).parent().data('name')).fadeIn();
                        window.location.hash = "#" + $(this).parent().data("name");
                    }
                }
            );
            $(".zalozky-content").find("[id^='tab']").hide();
            $(".zalozky-menu li:first").attr("id", "current");
            $(".zalozky-content div:first").fadeIn();
        }
    );
</script>

Javascript pro záložky s kotvou

<script type="text/javascript">
    $(document).ready(
        function() {
            $(".zalozky-menu a").click(
                function(e) {
                    e.preventDefault();
                    if ($(this).closest("li").attr("id") != "current") {
                        $(".zalozky-content").find("div[id^='tab']").hide();
                        $(".zalozky-menu li").attr("id", "");
                        $(this).parent().attr("id", "current");
                        $('#tab-' + $(this).parent().data('name')).fadeIn();
                        window.location.hash = "#" + $(this).parent().data("name");
                    }
                }
            );
            $(".zalozky-content").find("[id^='tab']").hide();
            var anchor = window.location.hash;
            if (anchor) {
                anchor = anchor.substr(1);
                var element = window.document.getElementsByClassName("tab-" + anchor)[0];
                if (element) {
                    $(".zalozky-menu li").attr("id","");
                    element.id = "current";
                    $(".zalozky-content #tab-" + anchor).fadeIn();
                } else {
                    $(".zalozky-menu li:first").attr("id", "current");
                    $(".zalozky-content div:first").fadeIn();
                }
            } else {
                $(".zalozky-menu li:first").attr("id", "current");
                $(".zalozky-content div:first").fadeIn();
            }
        }
    );
</script>

Javascript pro záložky se scroll na content

Se záložkami byl problém zejména v responzivu, kdy při překlikávání mezi záložkami, se obsah měnil až níže a změny tak nebyly viditelné. Proto byl do scriptu přidán scroll, který při překliknutí posune obsah níže na content. Ukázku může najít zde http://www.kacaba.cz

<script type="text/javascript">
    $(document).ready(
        function() {
            $(".zalozky-menu a").click(
                function(e) {
                    e.preventDefault();
                    if ($(this).closest("li").attr("id") != "current") {
                        $(".zalozky-content").find("div[id^='tab']").hide();
                        $(".zalozky-menu li").attr("id", "");
                        $(this).parent().attr("id", "current");
                        $('#tab-' + $(this).parent().data('name')).fadeIn();
           $('html, body').animate({
                        scrollTop: $('#tab-' + $(this).parent().data('name')).offset().top
                         }, 2000);
                        window.location.hash = "#" + $(this).parent().data("name");
                    }
                }
            );
            $(".zalozky-content").find("[id^='tab']").hide();
            var anchor = window.location.hash;
            if (anchor) {
                anchor = anchor.substr(1);
                var element = window.document.getElementsByClassName("tab-" + anchor)[0];
                if (element) {
                    $(".zalozky-menu li").attr("id","");
                    element.id = "current";
                    $(".zalozky-content #tab-" + anchor).fadeIn();
                } else {
                    $(".zalozky-menu li:first").attr("id", "current");
                    $(".zalozky-content div:first").fadeIn();
                }
            } else {
                $(".zalozky-menu li:first").attr("id", "current");
                $(".zalozky-content div:first").fadeIn();
            }
        }
    );
</script>

 

Jak to funguje si můžete vyzkoušet na http://www.fofrcz.cz výběrem některého modulu v rozcestníku s názvem "Základní moduly přepravy".

 

Ukázky

 

 

Pozor! - Vyhledávače sice naleznou obsah v záložkách, ale při otevření odkazu se nezobrazí stránka s již otevřenou záložkou, ve které se hledané slovo/sousloví nachází, ale jak je to defaultně nastavené, tedy s otevřenou první záložkou!


Komentáře


Žádné komentáře doposud nebyly přidány.

Přidat komentář

Vámi zadané osobní údaje budeme zpracovávat my a to pro možnost vám odpovědět. Bližší informace naleznete v zásadách zpracování osobních údajů.

Kalendář akcí

Po Út St Čt So Ne
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4