CSS - Implementácia funkčného menu do eshopu s chybami

30. 6. 2014 20:28:20

vypněte si js, oddělejte ten nesmysl overflow:hidden, pak display:none z druhé úrovně, nastavte to menu pouze pomocí css a pak až řešte ten javascript, toto je přece naprosto triviální problém

30. 6. 2014 20:28:20

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035919

Melnikovic

30. 6. 2014 20:31:30

Napsal ivanbohatyr;1102603
vypněte si js, oddělejte ten nesmysl overflow:hidden, pak display:none z druhé úrovně, nastavte to menu pouze pomocí css a pak až řešte ten javascript, toto je přece naprosto triviální problém

Už to zasa vyzerá o čosi inak, každopádne sám som si myslel aké to bude jednoduché upraviť a nejako mi to nejde :)

30. 6. 2014 20:31:30

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035918

Melnikovic

30. 6. 2014 20:46:09

Napsal ivanbohatyr;1102603
vypněte si js, oddělejte ten nesmysl overflow:hidden, pak display:none z druhé úrovně, nastavte to menu pouze pomocí css a pak až řešte ten javascript, toto je přece naprosto triviální problém

Troška som to zasa upravil a ak sa mam priznať sam som to pokladal za trivialny problem ale akosi mi to nejde tak lahko ako som čakal :) ale už aspon zobrazuje SUBMENU

30. 6. 2014 20:46:09

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035917

Aleš Trunda

(16 hodnocení)

30. 6. 2014 20:53:16

Myslím dekompozice tomu učitelé říkali - rozklad problému na podproblémy - to přesně musíte udělat, rozložte si problém na podproblémy a vyřešte pak jednotlivé podproblémy samostatně, očividně s tím totiž máte jako s celkem problémy. Začněte tím, že vypnete js, najděte jednotlivé css vlastnosti v souboru global.css a ty upravte až docílíte požadovaného zobrazení, až pak začněte řešit další věci.

30. 6. 2014 20:53:16

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035916

Melnikovic

30. 6. 2014 21:16:12

Prakticky už potrebujem vyriešit len 3 problémy,

1. Aby sa submenu prestalo zobrazovať stale ale len po :hover

2. Aby sa rovnako zobrazovalo na hlavnej stranke ako na substrankach (to bude ten JS)

3. Troska rozdielne sa vykresluje to submenu podla rozlisenia, to treba fixnut no

30. 6. 2014 21:16:12

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035915

sqrt

30. 6. 2014 23:11:08

Tohle by mělo fungovat:

/*************************************************************************************************	CATEGORIES*************************************************************************************************/#categories_block_left {    padding-bottom: 20px;}#categories_block_left h4 {    margin-bottom: 0;    padding-bottom: 18px;    font-size: 25px;    line-height: 35px;    color: #ffffff;}@media only screen and (min-width: 768px) and (max-width: 991px) {    #categories_block_left h4 {        font-size: 18px;    }}#categories_block_left .block_content {    padding: 0;}/* Menu */#categories_block_left .tree {    position: relative;    background: #333;    z-index: 2;}#categories_block_left .tree,#categories_block_left .tree li {    margin: 0;    padding: 0;    list-style: none;}#categories_block_left .tree li {    position: relative;}#categories_block_left .tree li:hover > ul {    display: block !important;}#categories_block_left .tree a {    display: block;    line-height: 18px;    text-decoration: none;}#categories_block_left .tree .grower {    position: absolute;    font-size: 13px;    line-height: 13px;    text-shadow: 0 1px #6d6d6d;    color: #fff;}/* First level */#categories_block_left .tree > li > a {    padding: 15px 30px 15px 20px;    font-size: 17px;    text-shadow: 0 1px #2d2d2d;    color: #fff;}#categories_block_left .tree > li > .grower {    top: 18px;    right: 20px;}#categories_block_left .tree > li + li {    border-top: 1px solid white;}#categories_block_left .tree > li:hover,#categories_block_left .tree > li > .selected,#categories_block_left .tree > li:hover ul,#categories_block_left .tree > li > .selected + ul {    background: orange !important;}#categories_block_left .tree > li:hover > a,#categories_block_left .tree > li > .selected {    color: #333;}#categories_block_left .tree > li > a > .icon-caret-right,#categories_block_left .tree > li > a > .icon-caret-left,#categories_block_left .tree > li:hover >  {    display: none;}/* Other levels */#categories_block_left .tree > li > ul {    display: none !important;    position: absolute;    top: 0;    left: 100%;    width: 200px;}#categories_block_left .tree > li > ul .grower {    top: 6px;    right: 18px;}#categories_block_left .tree > li > ul li + li {    border-top: 1px solid gold;}#categories_block_left .tree > li > ul li:hover {    background: #b1b536;}#categories_block_left .tree > li > ul a {    padding: 15px 20px;    font-size: 13px;    font-weight: bold;    color: #333;}#categories_block_left .tree > li > ul a > .icon-caret-right {    margin-right: 8px;}#categories_block_left .tree > li > ul a >  +  {    display: none;}

30. 6. 2014 23:11:08

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035914

Melnikovic

30. 6. 2014 23:25:49

Bohuzial, prave naopak zmaze to velku cast stranky ktorá je uz hotová :), viď obrázok

30. 6. 2014 23:25:49

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035913

sqrt

30. 6. 2014 23:40:38

Nejspíš to CSS vkládáš na špatné místo. V global.css tím nahraď celou sekci "categories" až po "filter".

PS: U #categories_block_left si ještě doplň margin-top: -93px;

30. 6. 2014 23:40:38

https://webtrh.cz/diskuse/css-implementacia-funkcneho-menu-do-eshopu-s-chybami/strana/2/#reply1035912

Melnikovic

1. 7. 2014 00:19:41

Máš pravdu, šlape to! Môžem sa spýtať na posledný detail? Ako upraviť width toho submenu? Bojim sa totiz ze ak to nastavim napevno tak sa to nebude menit v pripade ak sa bude zmensovat rozlisenie a dost to skazí dojem.