Witam,
Mam do zrobienia menu poziome wyrównane do prawej:
AAA BBB CCC DDD
i cały sęk w tym, żeby po najechaniu myszką na pozycję CCC rozwijała się ona dodatkowo na EEE i FFF. Dodatkowo chciałbym, żeby kolor standardowy czcionki był czarny a po na jechaniu myszką zmieniał się na biały.
Byłby mi ktoś w stanie pomóc? Znalazłem tutaj na forum podobny przykład menu w pionie, ale nie dałem rady go przerobić niestety.
Chodzi Ci o takie coś:
AAA BBB CCC DDD
EEE
FFF
czy
AAA BBB CCC EEE FFF DDD
A zmianę stylu elementu (linka), np. koloru czcionki uzyskasz przy użyciu pseudoklasy :hover http://www.w3schools.com/css/css_link.asp
Chodzi mi o pierwszą wersję.
Czyli o standardowe zachowanie się menu typu pull-down. Przykładów na tego typu menu jest mnóstwo - użyj wyszukiwarki.
Mam coś takiego:
#menu {
background: #cccccc;
height: 50px;
width: 800px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: right;
position: relative;
}
#menu ul li a {
background: #cccccc;
color: black;
border: 1px solid #cccccc;
display: block;
padding: 15px;
width: 115px;
}
#menu ul ul {
padding:0;
overflow: hidden;
}
#menu ul ul li {
float: none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#menu ul ul li a {
background: Gainsboro;
color: black;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}
DDDDD
CCCCC
EEEEE
FFFFF
BBBBB
AAAAA
Chciałbym, żeby po najechaniu myszką na główne hasła (AAAAA, BBBBB, CCCCC, DDDDD) kolor czcionki zmieniał się na biały, dodatkowo, żeby po rozwinięciu CCCCC na EEEEE i FFFFF zawartość poniżej nie odsuwała się w dół, tylko żeby menu rozwinięte menu nachodziło na pozostałą zawartość strony, i żeby też zmieniał się kolor czcionki EEEEE i FFFFF po najechaniu myszką (bez zmiany tła), tak jak w przypadku górnej części menu.
Będzie ktoś chętny pomóc?
Nie wiem, czy o to konkretnie chodzi, więc przetestuj.
html
[code]#menu { width: 600px; } ul { margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } li ul { display: none; } ul li a { display: block; text-decoration: none; text-align: center; background: #ccc; color: #000; border: 1px solid #ccc; padding: 15px; width: 115px; white-space: nowrap; } ul li a:hover { color: #fff; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; }
Dzięki Ci dobry człowieku za pomoc:)
Niemalże o to mi chodzi właśnie… ale mam tabelę o szerokości 800 px i chciałbym, żeby to moje menu było wyrównane do prawej, bo od lewej strony na tym samym poziomie jeszcze muszę wstawić obrazek.
Poradzisz pomóc?
Chyba niedokładnie sprecyzowalem: mam tabelę o szerokosci 800px i chciałbym, żeby była wyśrodkowana na stronie a menu wyrównane w tej tabeli do prawej.
A istnieje opcja, żeby na każdą pozycję (np. AAAAA, BBBBB itd) szerokość pola była przydzielona dynamicznie, a nie była stała (czyli w tym wypadku nie 115 px, tylko tyle, ile zajmuje AAAAA plus przed i po 2 miejsca wolne)? Kurde boję się, że znowu zamieszam:)
No to teraz będzie chyba już tak jak trzeba 
(poprawiony przykład)
Całość wstawiona w wyśrodkowany kontener o szerokości 800px, “Lorem ipsum” (jako przykładowa treść) robi za “pseudo-tabelę” o szerokości 800px. Pasek nawigacyjny ma taką samą szerokość, a samo menu jest przesunięte do prawej (chyba że określisz szerokość, którą usunąłem -600px było- i będzie wydawało się, że nie jest tak jak powinno, ponieważ menu nie jest kolorowane ;)).
Usunięta stała szerokość 115px, w zamian skaluje się do wpisów (z odstępami z lewej i prawej po 25px).
Wpisy w podmenu mają stałą szerokość (raczej tymczasowo 100px), inaczej -przy obecnej treści- menu zwężałoby się (możliwych regulacji dokona się, gdy będzie właściwa treść).
Dokładnie o to mi chodziło:) Dzięki serdeczne.
A mógłbys mi wskazać jeszcze miejsce, gdzie dokładnie wstawić obrazek, który będzie odsyłaczem do podstrony? Chodzi mi o to, żeby obrazek był wyrównany do lewej strony tego kontenera o szerokości 800 px.
Z tego co wcześniej zrozumiałem, to obrazek miał być na równi z menu, więc wstaw go w “nav” (i nadaj mu “float: left;”).
Chyba będę musiał prosić o łopatologiczną pomoc, bo dłubię, dłubię i wydłubać nie umiem:/
Oczywiście, jeśli nie straciłeś jeszcze cierpliwości:)
Jakich wymiarów ma być ten obrazek (wstawię jakiś zastępczy, potem podmienisz)?
Szerokość: 141px, wysokość: 40 px.
jsfiddle leży, więc…
css:
#container {
width: 800px;
margin: 0 auto;
}
#nav {
width: 800px;
height: 53px;
background-color: #454545;
}
.logo img {
padding: 6px;
}
#menu {
float: right;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
text-align: center;
background: #ccc;
color: #000;
border: 1px solid #ccc;
padding: 15px 25px;
white-space: nowrap;
}
ul li a:hover {
color: #fff;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
width: 100px;
}
.pseudo-tabela {
width: 800px;
}
html zawartość “body”:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
[/code]
hmmm… coś nie poszło tak jak miało: obrazek jest wyśrodkowany powyżej menu… a miał być na poziomie menu, ale wyrównany do lewej…
U mnie wygląda to w ten sposób:
A jak u Ciebie?
O dokładnie taki efekt mi chodzi, a moje “logo strony” jest powyżej menu i jest samym środku. Nie wiem dlaczego u Ciebie jest ok, a u mnie nie.
Nie wiem czy kopiowałeś powyższy kod czy dopisywałeś ręcznie (lub coś usuwałeś), ale sprawdź czy w odpowiednim miejscu masz lub jeśli to nie to, podaj cały kod swojej strony, może coś czego w powyższym nie ma, koliduje we właściwym wyświetlaniu.
PS. Dopisz do .logo img “border: none;”, bo sprawdzając jak się strona wyświetla w przeglądarkach (Fx, O, GC i IE), zauważyłem, że IE dodaje domyślnie ramkę