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

Header - menu z przedziałami

0 głosów
49 wizyt
pytanie zadane 8 kwietnia 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 przez lapa19904 Dyskutant (7,750 p.)
edycja 8 kwietnia przez lapa19904
Ja bym załatwił to dając border-right* do li z wyłączeniem ostatniego dziecka.
komentarz 8 kwietnia przez pablop76 Szeryf (97,990 p.)
przywrócone 8 kwietnia przez pablop76
Chyba pierwszego dziecka?
komentarz 8 kwietnia przez lapa19904 Dyskutant (7,750 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 przez Greeenone Stary wyjadacz (12,450 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ź 66 wizyt
0 głosów
1 odpowiedź 129 wizyt
pytanie zadane 15 listopada 2018 w HTML i CSS przez 42savage Bywalec (2,590 p.)
0 głosów
1 odpowiedź 51 wizyt
pytanie zadane 29 stycznia 2018 w HTML i CSS przez Hardwell Gaduła (4,760 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

67,143 zapytań

114,089 odpowiedzi

241,831 komentarzy

47,039 pasjonatów

Przeglądających: 264
Pasjonatów: 7 Gości: 257

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...