Zmiana menu pod konkretny rozmiar

Dla specjalistów Webmastering
#1

Witam, menu pod rozdzielczością Monitorów (Desktop + Laptop) 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?

#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).

#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

#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.

#5

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

#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.