• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Header - menu z przedziałami

VPS Starter Arubacloud
0 głosów
245 wizyt
pytanie zadane 8 kwietnia 2019 w HTML i CSS przez romixen Nowicjusz (120 p.)

Mam problem z menu, które będzie rozdzielane pionowymi znakami pomiędzy poszczególnymi elementami. W jaki sposób mogę to wdrożyć?

 

<nav id="header-navbar" class="navbar navbar-fixed-top" role="navigation">
    <div class="container">  
        <div id="logo">
            <div>
                <a href="{$homepage_url}">
                    <img src="{image_path image='logo.png'}" alt="" />
                </a>
            </div> 
        </div>                 
        <div id="navbar-buttons" class="btn-group pull-right">  
            <button id="nav-button-search" type="button" class="btn btn-navbar hidden-xs collapsed" data-toggle="collapse" data-target="#nav-search"  data-parent="#header-navbar">
                <span class="glyphicon glyphicon-search"></span>
            </button>  

            <button id="nav-button-shopping-cart" class="btn btn-navbar collapsed empty" data-toggle="collapse" data-target="#nav-shopping-cart"  data-parent="#header-navbar">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                <small class="quantity"></small>
            </button>

            {if !$sf_user->isAuthenticated()} 
            <a href="{url_for internal='stUser/loginUser' secure=true}" id="nav-button-user" class="hidden-xs btn btn-navbar collapsed">
                <span id="login-status-info" class="glyphicon glyphicon-user"></span>
                <small class="login-status">&nbsp;</small>
            </a> 
            <button id="nav-button-user" class="visible-xs btn btn-navbar collapsed" data-toggle="collapse" data-target="#nav-user" data-parent="#header-navbar">
                <span id="login-status-info" class="glyphicon glyphicon-user"></span>
                <small class="login-status">&nbsp;</small>
            </button>     
            {else}
            <button id="nav-button-user" class="btn btn-navbar collapsed" data-toggle="collapse" data-target="#nav-user" data-parent="#header-navbar">
                <span id="login-status-info" class="glyphicon glyphicon-user"></span>
                <small class="login-status">&nbsp;</small>
            </button>            
            {/if}                                 
            <button id="nav-button-settings" class="btn btn-navbar hidden-xs collapsed" data-toggle="collapse" data-target="#nav-settings" data-parent="#header-navbar">
                <span class="glyphicon glyphicon-globe"></span>
            </button>                                                                  
        </div>           
        <div class="navbar-header">
            <button id="nav-button-menu" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" data-parent="#header-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>                            
        </div>               
        <!-- Menu -->
            <div id="nav-menu" class="navbar-collapse collapse">
                {st_get_component module="stCategoryTree" component="horizontal"}
            </div>            
        <div class="navbar-dropdown">                
            <!-- Koszyk -->
            <div id="nav-shopping-cart" class="navbar-collapse collapse">
                    {st_get_component module="stBasket" component="show"}
            </div>        

            <div id="nav-user" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <!-- Moje konto, Język, Waluta -->                    
                    {st_get_component module="stUser" component="loginStatus"}                                                           
                </ul>
            </div>

            {strip}
            <div id="nav-settings" class="hidden-xs navbar-collapse collapse">
                <ul class="nav navbar-nav">    
                    <li class="dropdown">
                        {st_get_component module="stLanguageFrontend" component="choose"}
                    </li>
                    <li class="dropdown">
                        {st_get_component module="stCurrencyFrontend" component="pickCurrency"}
                    </li>                                                           
                </ul>
                {slot name="nav-setting" hidden="true"}{/slot}
            </div>
            {/strip}

            <div id="nav-search" class="navbar-collapse collapse hidden-xs">
                {include_file id="_search"}
            </div>
        </div>
    </div>
</nav>
{literal}
<script type="text/javascript">    
//<![CDATA[
jQuery(function($) {
    if ($('#nav-settings  > ul > li:empty').length == 2)
    {
        $('#nav-button-settings').hide();
    } 

    $(document).ready(function(){   
        if ($(window).width() < 768) {
            var windowHeightMobile = $(window).height();
            var menuHeightMobile = $('#header-navbar').height();
            $('#header-navbar .navbar-collapse').css('max-height', windowHeightMobile - menuHeightMobile);
        };    
    });
   
});
//]]>
</script> 
{/literal}

Strona: promoto.nutron.pl

2 odpowiedzi

+1 głos
odpowiedź 8 kwietnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
edycja 8 kwietnia 2019 przez lapa19904
Ja bym załatwił to dając border-right* do li z wyłączeniem ostatniego dziecka.
komentarz 8 kwietnia 2019 przez pablop76 VIP (123,060 p.)
przywrócone 8 kwietnia 2019 przez pablop76
Chyba pierwszego dziecka?
komentarz 8 kwietnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
tak do pierwszego. Pomyliłem się, zmieniłem już na border-right bo to miałem na myśli.
0 głosów
odpowiedź 8 kwietnia 2019 przez Greeenone Pasjonat (16,100 p.)
Moim zdaniem najlepsze będzie użycie pseudo elementu after. Dzięki temu będzie miał kontrolę nad elementami. Za chwilę podeślę demo.

Podobne pytania

0 głosów
1 odpowiedź 234 wizyt
0 głosów
1 odpowiedź 71 wizyt
pytanie zadane 18 lipca 2023 w HTML i CSS przez nesta Nowicjusz (220 p.)
+1 głos
0 odpowiedzi 314 wizyt
pytanie zadane 11 grudnia 2020 w HTML i CSS przez kamil1503 Nowicjusz (130 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...