+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Rozwijane menu w Bok (/thread-rozwijane-menu-w-bok)
Rozwijane menu w Bok - Boshi - 24-09-2014
Cześć, jestem nowy na waszym forum, dlatego chcę się na powitanie przywitać.
Teraz do rzeczy: ćwiczę sobie css+HTML. Napisałem stronkę z menu, ale doszedłem do wniosku, że przydało by mi się rozwijane menu na boki lub w dół.
Jak mogę to zmodernizować? Próbowałem na wiele sposobów, jedna za żadne skarby nie mogę nic wymśleć
Tak wygląda css menu
Kod:
#menu{
float:left;
background-color:black;
width:200px;
padding:0;
border-radius:25px;
border-right:2px solid red;
margin-top:4px;
}
ul li {
border:1px solid #660000;
}
ul>li:first-child
{
border-top:none;
}
ul li a
{
display:block;
font-size:1em;
color:white;
text-decoration:none;
text-align:center;
padding:2px;
cursor:pointer;
transition-duration:200ms;
transition-timing-function:linear;
}
ul li a:visited{
color:white;
}
ul li a:active{
color:blue;
}
ul li a:hover{
background-color:#800;
margin-left:2px;
border-radius:30px;
box-shadow:0 0 4px 3px white ;
}
a:hover{
color:white;
}A tak HTML
Kod:
<div id="menu">
<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
<ul>
<li><a href="index.html"><p>Strona główna</p></a></li>
<li><a href=""><p>modele</p></a>
<ul>
<li><a href="index.html"><p>link1</p></a></li>
<li><a href="index.html"><p>link2</p></a></li>
<li><a href="index.html"><p>link3</p></a></li>
</ul>
</li>
<li><a href="#"><p>galeria</p></a></li>
<li><a href="kontakt.html"><p>kontakt</p></a></li>
</ul>
</div>RE: Rozwijane menu w Bok - Kartofelek - 24-09-2014
<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
Poziomego czy pionowego?
Pamiętaj że:
[element który ma position:absolute jest pozycjonowany względem nadrzędnego elementu który ma position:relative]
Jeżeli teraz twoje LI będzie miało position relative, a LI UL miało position:absolute; left:100%; top:0 to będą się układały po rozwinięciu z boku tych LI.
czyli
Kod:
LI {position:relative;}
LI UL {position:absolute; left:100%; top:0;}+ oczywiście:
Kod:
LI UL {display:none;}
LI:hover > UL {display:block;}Z całą resztą sobie poradzisz
RE: Rozwijane menu w Bok - Boshi - 24-09-2014
Super, dzięki wielkie, oczywiście działa! Z resztą faktycznie dam sobie radę bez problemów mysle.
ps. chodziło o pionowe, błąd w zapisie
RE: Rozwijane menu w Bok - Boshi - 25-09-2014
Przepraszam za post pod postem, ale nie wiem czy ktoś będzie widział edycję.
Zrobiłem jednak troszkę inaczej, tzn menu wyświetlane jest pod jednym z linków. Problem jest taki, że jeżeli zjadę kursorem z submenu to natychmiast ono się zamyka, a np aby najechać na linka pod submenu, to trzeba najpierw jest zamknać a potem dopiero mozna wcisnąć. Myślałem nad przejściem, ale za cholery nie mogę go wykonać na tym sub menu aby rozwijało i zwijało się np z opóźnieniem.
Struktura HTML wygląda tak jak wcześniej.
CSS
Dodam stronę na serwerze(polecam w oprzerze/chrome na tę chwilę bo ff coś szaleje)
http://moje-testy.opx.pl/modele.html
I jeżeli może ktoś mniej więcej ocenić jak taka strona wygląda? (robiona dla siebie, pierwsza strona)
Kod:
#menu{
float:left;
background-color:black;
width:200px;
padding:0;
border-radius:25px;
border-right:2px solid red;
margin-top:4px;
}
/*stylizacja menu*/
ul, li{
padding:0;
margin:0;
list-style-type:none;
border-radius:30px;
}
ul{
border:1px solid #660000 ;
background: #2b2b2b; /* Old browsers */
background: -moz-linear-gradient(top, #2b2b2b 4%, #1c1c1c 9%, #131313 16%, #131313 19%, #111111 45%, #2c2c2c 52%, #161616 68%, #161616 73%, #000000 97%, #4c4c4c 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#2b2b2b), color-stop(9%,#1c1c1c), color-stop(16%,#131313), color-stop(19%,#131313), color-stop(45%,#111111), color-stop(52%,#2c2c2c), color-stop(68%,#161616), color-stop(73%,#161616), color-stop(97%,#000000), color-stop(98%,#4c4c4c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* IE10+ */
background: linear-gradient(to bottom, #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#4c4c4c',GradientType=0 ); /* IE6-9 */
}
li ul{
display:none;
}
li:hover ul {
display:block;
margin-top:10px;
margin-bottom:10px;
border:none;
}
li:hover ul a {
font-size:10px;
background-color:#800;
border-radius:25px;
border:2px double black;
margin:10px;
brder:none;
}
ul>li:first-child
{
border-top:none;
}
ul li a
{
display:block;
font-size:1em;
color:white;
text-decoration:none;
text-align:center;
padding:2px;
cursor:pointer;
transition-duration:300ms;
transition-timing-function:linear;
}
ul li a:visited{
color:white;
}
ul li a:active{
color:blue;
}
ul li a:hover{
background-color:#800;
margin-left:2px;
border-radius:30px;
box-shadow:0 0 4px 3px white ;
color:white;
}RE: Rozwijane menu w Bok - Kartofelek - 25-09-2014
Tak nie rób. Jak chcesz zrobić tak jak w załączonej stronie (czyli menu rozwija się w dół), to lepiej zrób to z klikniem, bo będzie wygodniej.
Ogólnie lepie celuj w kliknięcia, bo któregoś dnia zaczniesz robić menuski dla telefonów i okaże się że nie masz kursora
Zrób mniej więcej tak:
JS - po kliknięciu na A sprawdzam czy tuż za nim jest lista (submenu). Jeżeli jest to do LI w którym jest ten link dodaje klasę show. Dzięki niej pokażę submenu
Kod:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('#menu a').on('click', function(e) {
if ($(this).next('ul').lenght) {
e.preventDefault();
$(this).parent().toggleClass('show');
}
});
</script>CSS:
Kod:
li ul {
max-height:0;
overflow:hidden;
-moz-transition:0.5s max-height
-webkit-transition:0.5s max-height
transition:0.5s max-height
}
li.show > ul {
max-height:600px;
}No i dbaj o kod. czemu do linków A w #menu wrzuciłeś paragrafy?
RE: Rozwijane menu w Bok - Boshi - 25-09-2014
Jakie paragrafy? Nie bardzo rozumiem?
Jeżeli chodzi o skrypt, to działa choć wydaje mi się, że powinno to dzialąć na zasadzie klik=akcja, aktualnie wystarczy kliknąć raz w Link a menu będzie się rozwijało już po najechaniu potem na niego, a powinno być dopiero po ponownym kliknięciu. Druga sprawa, czy da się coś zaradzić na to by po zjechaniu z submenu kursorem nie zamykało się ono? (dopiero kiedy klikniemy na nadmenu) Podejrzewam, że to też skrypt w JS albo jQuery, ale osobiście nie mam pojęcia o tym języku, bardziej to już php + mysql.
Dzięki za pomoc w temacie
RE: Rozwijane menu w Bok - Engine - 26-09-2014
coś tak, dodatkowo masz możliwość ustawienia class="active" dla li
Kod:
<div id="menu">
<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
<ul>
<li class="active"><a href="index.html"><p>Strona główna</p></a></li>
<li><a href="" class="dropdown-toggle"><p>modele</p></a>
<ul>
<li><a href="index.html"><p>link1</p></a></li>
<li><a href="index.html"><p>link2</p></a></li>
<li><a href="index.html"><p>link3</p></a></li>
</ul>
</li>
<li><a href="#"><p>galeria</p></a></li>
<li><a href="kontakt.html"><p>kontakt</p></a></li>
</ul>
</div>
<script type="text/javascript">
var menu_wrapper = function() {
$('#menu a.dropdown-toggle').on("click", function() {
$li = $(this).parent();
$class = $li.attr('class').split(' ');
if($.inArray('open-toggle', $class) !== -1) {
$li.find('.sub-menu').slideUp(function() {
$li.removeClass('open-toggle');
});
} else {
$open = $li.parent().find('.open-toggle');
$.each($open, function( key, value ) {
if($.inArray('active', $(this).attr('class').split(' ')) == -1) {
$(this).find('.sub-menu').slideUp(function() {
$(this).parent().removeClass('open-toggle');
});
}
});
$li.find('.sub-menu').slideDown(function() {
$li.addClass('open-toggle');
});
}
return false;
});
}
$(document).ready(function() {
menu_wrapper();
});RE: Rozwijane menu w Bok - Kartofelek - 27-09-2014
Tamto co ci podałem działa dobrze, tylko ty pewnie masz jeszcze swoje rozwijanie dla :hover.
Engine, ten twój kod nie jest za piękny.
http://jqapi.com/#p=hasClass