Jak poprawnie ustawić menu kategorii korzystając z Bootstrap

Odpowiedz Nowy wątek
2015-07-25 18:16
0

Witam, chciałbym nadać jakiś wstępny wygląd dla mojej aplikacji, a jako że słabo znam css html i bootstrap nie wiem jak sobie poradzić z pewną rzeczą.
Chcę za pomocą bootstrap stworzyć sobie menu kategorii. Mam je już tylko że teraz zależy mi na tym żeby było ono nieruchome, tzn że niezależnie czy mam przeglądarkę w trybie pełnoekranowym, czy trochę mniejszym ciągle pozostawało w takich samych rozmiarach, aż w przypadku określonej małej rozdzielczości przy której moje menu kategorii zmienia się w pasek i wędruje na górę strony(co udało mi się już osiągnąć).

Jak to zrobić ? użycie

<div class="col-sm-3 col-lg-2 col-md-2">

dla bloku menu kategorii chyba odpada, bo nie podoba mi się w tym przypadku rezultat

Taki mam kod, którego rezultat przedstawiają zdjęcia w załącznikach

<body>

    <div class="row">
        <div class="col-sm-3 col-lg-2 col-md-2">
            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <span class="visible-xs navbar-brand">Sidebar menu</span>
                    </div>
                    <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Menu Item 1</a></li>
                            <li><a href="#">Menu Item 2</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">Nav header</li>
                                    <li><a href="#">Separated link</a></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Menu Item 4</a></li>
                            <li><a href="#">Reviews <span class="badge">1,118</span></a></li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            Main content goes here
            @RenderBody();
        </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

</body>
edytowany 1x, ostatnio: RideorDie, 2015-07-25 19:34

Pozostało 580 znaków

2015-07-25 18:24
0

Poczekaj, bo nie jestem pewien czy rozumiem, chcesz mieć menu z lewej strony rozciagniete na cala wysokosc ekranu i podczas przewijania w dol tam zostaje, a po wejsciu w rozdzielczosc komorkowa chcesz zeby Ci sie pojawilo menu nalesnikowe (z tymi guziczkami) na samej gorze tak?

http://jsfiddle.net/78h40mmu/1/


„Every Pro was once an amateur, every expert was once a beginner.”
edytowany 1x, ostatnio: Fi3rce, 2015-07-25 18:49
No o coś takiego, dzięki za link. Pobawię się z tym trochę i zobaczę jak to będzie wyglądać :) - RideorDie 2015-07-25 19:34
Spoko, jak cos to pisz to cos wymyslimy :) - Fi3rce 2015-07-25 21:57

Pozostało 580 znaków

2015-07-26 12:13
0

@Fi3rce Miałbyś jakiś pomysł jak zmienić, żeby w formacie komórkowym zawartość wyświetlana obok bloku kategorii, którego kod mi przesłałeś wyświetlała się od lewej strony a nie pamiętała starej odległości od lewej strony. Od wczoraj nad tym siedzę próbuje, ale to nie reaguje wgl. Nie wiem jak to zrobić.

Problem ilustrują zdjęcia

W Html mam:

<div class="MyContent">
        @RenderBody();
    </div>

i w css

.MyContent {
  padding-left: 6cm;
}

jeżeli odnajdę styl css dla @media( max-width:768px) i tam zmeinie padding-left na 1cm to nie reaguje wgl.

EDIT: Już mi się udało, teraz dopiero zobaczyłem że w złym miejscu mam kod.......

  • s.jpg (0.04 MB) - ściągnięć: 92
  • b.jpg (0.04 MB) - ściągnięć: 103
edytowany 7x, ostatnio: RideorDie, 2015-07-27 13:39

Pozostało 580 znaków

2015-07-28 11:28
0

Witam, a czy ktoś mi podpowie jak zrobić żeby w przypadku rozdzielczości dla formatu komórkowego zamiast pojawiającego się paska na górze z przyciskiem do rozwinięcia menu pojawił mi się tylko sam przycisk toggle navigation i powędrował do mojego nagłówka strony ?

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0