skalowanie menu

Question

http://codepen.io/anon/pen/ggxMJW  Jak zrobić by podczas zmniejszania okna zmniejszały się tematy menu a nie przeskakiwały na kolejne wiersze. I jeszcze jedno, tematy nie są na swoim miejscu. Żadne pozycjonowanie nie pomaga. Czy ktoś wytłumaczy mi to ? :D

Comments

dla osób które chcą czytelniejszy kod - bo ja dostawałem oczokwiku

http://codepen.io/kamillopl/pen/KavgdG

---

Witam

Jak zrobić by podczas zmniejszania okna zmniejszały się tematy menu

Pasek menu (width: 100%) należy podzielić na ilość elementów w nim zawartych i ustawić takie szerokości procentowe dla tych elementów.

Oczywiście jeżeli strona zmniejszy się tak, że nie pomieści  min. szerokości tych elementów w linii to i tak zaczną "spadać". Wtedy mediaqueries, lub jquery.

Możesz jeszcze zastanowić się nad tekstem w menu, bo to on ogranicza zmniejszanie się butonów.

tematy nie są na swoim miejscu.

Usuń wszystkie position i związane z nimi pozycjonowanie. Są nie potrzebne. Wysokość tekstu w linii można ustawić za pomocą line-height o wartości takiej samej jak element , w którym tekst się zawiera.

Wyśrodkowanie elementów śródliniowych  to chyba wiesz ? :). taka porada: daj text align: center; dla pojemnika i display: inline-block; dla elementów wewnątrz.

Kod jquery również bym poprawił. Write less, do more.

$(document).ready(function(){
    $('.qformie_napis').fadeIn(2000).fadeOut(1000);
    $('.pasek').hide().slideDown(1000);
  });

ukrycie paska można dać w css tak jak zrobiłeś to dla qformie_napis i wtedy usunąć .hide() z jquery.  Ale w tym rozwiązaniu istnieje niebezpieczeństwo, że jak użytkownik wyłączy js to nie zobaczy nic. :)

background-size dla koloru nie potrzebne. Stosuje się dla background-image.

Dwie czcionki w jednym ?

div.qformie_napis {
	font-family: 'Russo One', sans-serif;
	font-family: 'Days One', sans-serif;
	font-size:23vh;
	color:black;
	line-height:79vh;
	display:none;
}

Inna sprawa to menu zazwyczaj robi się za pomoca  list  <ul> i  <ol>

---

A co do menu fixed to zrobiłbym to w js.

Należy ustawić klasę w css

.navFixed{
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
}

i dodac trochę

do js

var nav = $('.pasek'); //zapisuje obiekt do zmiennej
	
	$(window).scroll(function () {  //sprawdza skrol okna
		if ($(this).scrollTop() > 60) {
			nav.addClass("navFixed");  //jeżeli jest większy niż 60px dodaje klasę
		} else {
			nav.removeClass("navFixed"); //jeżeli nie usuwa klasę
		}
	});

 

Answer 1

nadaj klasie "p" background-color: red; (nie po to by taki został, lecz żebyś widział co się dzieje z tymi elementami faktycznie, jak już ustawisz to zlikwidujesz)

i teraz tak:

klasa "p" nie potrzebuje specjalnego pozycjonowania relative, wystarczy float:left albo display: inline-block

klasa "p" ma niepotrzebny padding-left, zamiast tego wystarczy nadać jej szerokość w procentach, np: width:10%;

a żeby tematy były na swoim miejscu to możesz albo ustawić im margin-top, albo divowi w którym się znajdują (div.pasek) nadać jakiś padding-top (zmniejszając tym samym o tę wartość jego wysokość)

Answer 2

Nie podam Ci tutaj kodu, ale co do responsywności to polecam Bootstrapa.

Każdy element w Twoim przypadku class="p" powinien mieć 100%/(ilość elementów) width. 

 

A tak na marginesie, straszny chaos, ciężko było tam cokolwiek zobaczyć w kodzie.(możliwe że tylko ja)

// ok nie tylko ja ^^

 

//o to mi chodziło :)

http://codepen.io/anon/pen/bgrwqj