Zmiana menu pod konkretny rozmiar


(maniek30dg) #1

Witam, menu pod rozdzielczością Monitorów (Desktop + Laptop) [](https://www.google.pl/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&sqi=2&ved=0CB4QFjAAahUKEwjsyOO3vZDJAhWF1xQKHcaOBOw&url=http%3A%2F%2Fwww.w3schools.com%2Fcss%2Fcss_rwd_mediaqueries.asp&usg=AFQjCNHZD2wGwQDHDDu7_renLbyC9CU_WA&sig2=HbAw6tdJaeg12JZhrHaY8g&bvm=bv.107467506,d.bGQ&cad=rja)jest takie:

<div id="nav">	
                <ul class="nav-menu">
                    <li>
                        <a href="#">
                            <span class="navff" id="brek">A</span>
                            <div class="nav-content">
                                <h2 class="nav-main">Strona Główna</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="navff">S</span>
                            <div class="nav-content">
                                <h2 class="nav-main">Oferta</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="navff">I</span>
                            <div class="nav-content">
                                <h2 class="nav-main">Galeria</h2>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="navff">d</span>
                            <div class="nav-content">
                                <h2 class="nav-main">Kontakt</h2>
                            </div>
                        </a>
                    </li>
                </ul>
    </div><!-- End: nav -->

jest to menu obrazkowe, a chciałem zrobić żeby po rozdzielczości 1100px menu było takie:

<nav>
		<ul>
		  <li><a href="#">Home</a></li>
		  <li><a href="#">Home2</a></li>
		  <li><a href="#">Home3</a></li>
		  <li><a href="#">Home4</a></li>
		  <li><a href="#">Home5</a></li>
		  <li><a href="#">Home6</a></li>
		</ul>
	</nav>

chciałem to zrobić w @media, jak to wszystko umieścić w pliku html?


(Pablo_Wawa) #2

Masz 2 możliwości:

  • możesz to zrobić w CSS3 (http://kodcss.pl/kurs-css/lekcje/dzial-1/css3-media-queries - parametr width lub device-width), ale nie każda przeglądarka to obsługuje;

  • w JavaScripcie sprawdzać rozdzielczość ekranu i dynamicznie zmieniać styl CSS (chyba najprościej jest mieć 3 style dla elementu body i/lub html z trzema różnymi klasami (lub id) i przy pomocy JS nadawać odpowiednią klasę/id obiektowi body/html).

Ale u Ciebie masz 2 różne kody HTML, więc równie dobrze będzie można ukrywać jeden rodzaj menu i pokazywać drugi (stylem CSS display) poprzez JS (a w kodzie stronie mieć wstawione oba ich rodzaje).


(maniek30dg) #3

Ogólnie chodzi mi o to że, 1 menu nie jest responsywne a podpięte jest do niego JS i chciałem żeby te menu przechodziło w takie pionowe bez efektów JS, zwykły pionowy standard z efektem hover, może nie trzeba dwóch menu tak jak to opisałem wcześniej, te które mam jakoś ostylować w css3? proszę o pomoc.

321.jpg


(Fizyda) #4

Co rozumiesz przez “menu po rozdzielczości 1100px”?

Od czego jest span.navff? Ogólnie opisz coś więcej o tym menu, lub daj style te co już masz.


(maniek30dg) #5

chodzi mi o to żeby menu było responsywne na kompie te pierwsze a pod urządzenia mobilne te drugie menu


(Fizyda) #6

W obu znajdują się te same pozycje, czy różne? Ten sam kontent tylko inaczej prezentowany czy inny. Na screenie masz 2 różne zawartości menu.