Jump to content
michalsX

Menu górne - stała szerokość

Recommended Posts

Witam. Presta 1.6. Menu górne - "Przyciski" menu górnego dopasowują się do szerokości tekstu. Jak zrobić, aby ich szerokość była stała (np. 6 pozycji na szerokość strony)?

Share this post


Link to post
Share on other sites

Witam, chcą Państwo uzyskać efekt taki, że wszystkie przyciski są na pełną szerokość menu ?

Można wartość padding ustawić tak aby zajmowały całą przestrzeń (blocktopmenu/css/superfish-modified.css): .sf-menu > li > a {.....}

Przy takich modyfikacjach należy pamiętać aby uwzględnić zmiany dla wersji responsywnej.

Share this post


Link to post
Share on other sites

Jeśli ma być ich 6 a szablon jest na bootstrapie to ustaw klasę dla elementu li np. col-md-2.

Share this post


Link to post
Share on other sites

Witam,

 

Proponuję rozwiązać to w ten sposób: 

Należy nadać style css dla ul oraz li, poniżej przykład dla standardowego menu Prestashop.

ul.sf-menu {width:100%;display:flex}
ul.sf-menu > li {flex-grow: 1;}

Czy to będzie 4,5 czy 6 linków w menu to rozłożą się one równomiernie na całą szerokość. Dla mniejszych ekranów gdzie linki nie będą się już mieścić trzeba będzie te style pozmieniać aby dopasować wizualnie menu do strony.

 

Share this post


Link to post
Share on other sites

Dzięki za podpowiedzi.

Będę próbował.

To jest moje pierwsze doświadczenie z prestą, stąd moje pytanie. Czy kod można edytować gdzieś z poziomu administratora w preście, czy po prostu przez np. ftp?

Share this post


Link to post
Share on other sites

Jeśli ma być ich 6 a szablon jest na bootstrapie to ustaw klasę dla elementu li np. col-md-2.

Można prosić o rozwinięcie tego?

Chciałbym aby menu wyglądało tak jak na obrazku.

W menu 18 pozycji, 3 wiersze po 6 pozycji, górny wiersz innego koloru a pozostałe innego.

Co z tego jest możliwe?

menu.jpg

Share this post


Link to post
Share on other sites

To może inaczej. Gdzie mam zmienić klasę elementu li? W jakim pliku, gdzie? Czy to mają być pliki w katalogu: /themes/default-bootstrap/css/modules/blocktopmenu/?

Share this post


Link to post
Share on other sites

Nie w pliku modułu który generuje elementy li a z tego co pamiętam jest to plik blocktopmenu.php

Share this post


Link to post
Share on other sites

Jest tam wiele funkcji. Czy to będzie function makeMenu()?

Wygląda tak:

    protected function makeMenu()
    {
        $menu_items = $this->getMenuItems();
        $id_lang = (int)$this->context->language->id;
        $id_shop = (int)Shop::getContextShopID();
 
        foreach ($menu_items as $item) {
            if (!$item) {
                continue;
            }
 
            preg_match($this->pattern, $item, $value);
            $id = (int)substr($item, strlen($value[1]), strlen($item));
 
            switch (substr($item, 0, strlen($value[1]))) {
                case 'CAT':
                    $this->_menu .= $this->generateCategoriesMenu(Category::getNestedCategories($id, $id_lang, false, $this->user_groups));
                    break;
 
                case 'PRD':
                    $selected = ($this->page_name == 'product' && (Tools::getValue('id_product') == $id)) ? ' class="sfHover"' : '';
                    $product = new Product((int)$id, true, (int)$id_lang);
                    if (!is_null($product->id)) {
                        $this->_menu .= '<li'.$selected.'><a href="'.Tools::HtmlEntitiesUTF8($product->getLink()).'" title="'.$product->name.'">'.$product->name.'</a></li>'.PHP_EOL;
                    }
                    break;
 
                case 'CMS':
                    $selected = ($this->page_name == 'cms' && (Tools::getValue('id_cms') == $id)) ? ' class="sfHover"' : '';
                    $cms = CMS::getLinks((int)$id_lang, array($id));
                    if (count($cms)) {
                        $this->_menu .= '<li'.$selected.'><a href="'.Tools::HtmlEntitiesUTF8($cms[0]['link']).'" title="'.Tools::safeOutput($cms[0]['meta_title']).'">'.Tools::safeOutput($cms[0]['meta_title']).'</a></li>'.PHP_EOL;
                    }
                    break;
 
                case 'CMS_CAT':
                    $category = new CMSCategory((int)$id, (int)$id_lang);
                    if (count($category)) {
                        $this->_menu .= '<li><a href="'.Tools::HtmlEntitiesUTF8($category->getLink()).'" title="'.$category->name.'">'.$category->name.'</a>';
                        $this->getCMSMenuItems($category->id);
                        $this->_menu .= '</li>'.PHP_EOL;
                    }
                    break;
 
                // Case to handle the option to show all Manufacturers
                case 'ALLMAN':
                    $link = new Link;
                    $this->_menu .= '<li><a href="'.$link->getPageLink('manufacturer').'" title="'.$this->l('All manufacturers').'">'.$this->l('All manufacturers').'</a><ul>'.PHP_EOL;
                    $manufacturers = Manufacturer::getManufacturers();
                    foreach ($manufacturers as $key => $manufacturer) {
                        $this->_menu .= '<li><a href="'.$link->getManufacturerLink((int)$manufacturer['id_manufacturer'], $manufacturer['link_rewrite']).'" title="'.Tools::safeOutput($manufacturer['name']).'">'.Tools::safeOutput($manufacturer['name']).'</a></li>'.PHP_EOL;
                    }
                    $this->_menu .= '</ul>';
                    break;
 
                case 'MAN':
                    $selected = ($this->page_name == 'manufacturer' && (Tools::getValue('id_manufacturer') == $id)) ? ' class="sfHover"' : '';
                    $manufacturer = new Manufacturer((int)$id, (int)$id_lang);
                    if (!is_null($manufacturer->id)) {
                        if (intval(Configuration::get('PS_REWRITING_SETTINGS'))) {
                            $manufacturer->link_rewrite = Tools::link_rewrite($manufacturer->name);
                        } else {
                            $manufacturer->link_rewrite = 0;
                        }
                        $link = new Link;
                        $this->_menu .= '<li'.$selected.'><a href="'.Tools::HtmlEntitiesUTF8($link->getManufacturerLink((int)$id, $manufacturer->link_rewrite)).'" title="'.Tools::safeOutput($manufacturer->name).'">'.Tools::safeOutput($manufacturer->name).'</a></li>'.PHP_EOL;
                    }
                    break;
 
                // Case to handle the option to show all Suppliers
                case 'ALLSUP':
                    $link = new Link;
                    $this->_menu .= '<li><a href="'.$link->getPageLink('supplier').'" title="'.$this->l('All suppliers').'">'.$this->l('All suppliers').'</a><ul>'.PHP_EOL;
                    $suppliers = Supplier::getSuppliers();
                    foreach ($suppliers as $key => $supplier) {
                        $this->_menu .= '<li><a href="'.$link->getSupplierLink((int)$supplier['id_supplier'], $supplier['link_rewrite']).'" title="'.Tools::safeOutput($supplier['name']).'">'.Tools::safeOutput($supplier['name']).'</a></li>'.PHP_EOL;
                    }
                    $this->_menu .= '</ul>';
                    break;
 
                case 'SUP':
                    $selected = ($this->page_name == 'supplier' && (Tools::getValue('id_supplier') == $id)) ? ' class="sfHover"' : '';
                    $supplier = new Supplier((int)$id, (int)$id_lang);
                    if (!is_null($supplier->id)) {
                        $link = new Link;
                        $this->_menu .= '<li'.$selected.'><a href="'.Tools::HtmlEntitiesUTF8($link->getSupplierLink((int)$id, $supplier->link_rewrite)).'" title="'.$supplier->name.'">'.$supplier->name.'</a></li>'.PHP_EOL;
                    }
                    break;
 
                case 'SHOP':
                    $selected = ($this->page_name == 'index' && ($this->context->shop->id == $id)) ? ' class="sfHover"' : '';
                    $shop = new Shop((int)$id);
                    if (Validate::isLoadedObject($shop)) {
                        $link = new Link;
                        $this->_menu .= '<li'.$selected.'><a href="'.Tools::HtmlEntitiesUTF8($shop->getBaseURL()).'" title="'.$shop->name.'">'.$shop->name.'</a></li>'.PHP_EOL;
                    }
                    break;
                case 'LNK':
                    $link = MenuTopLinks::get((int)$id, (int)$id_lang, (int)$id_shop);
                    if (count($link)) {
                        if (!isset($link[0]['label']) || ($link[0]['label'] == '')) {
                            $default_language = Configuration::get('PS_LANG_DEFAULT');
                            $link = MenuTopLinks::get($link[0]['id_linksmenutop'], $default_language, (int)Shop::getContextShopID());
                        }
                        $this->_menu .= '<li><a href="'.Tools::HtmlEntitiesUTF8($link[0]['link']).'"'.(($link[0]['new_window']) ? ' onclick="return !window.open(this.href);"': '').' title="'.Tools::safeOutput($link[0]['label']).'">'.Tools::safeOutput($link[0]['label']).'</a></li>'.PHP_EOL;
                    }
                    break;
            }
        }
    }

Share this post


Link to post
Share on other sites

żeby za bardzo nie komplikować, spróbuj dodać do pliku bloktopmenu.tpl:
 

    <script>
        $(document).ready(function(){
            $('.sf-menu > li').addClass('col-sm-2');
        });
    </script>

    
    <style>
        .sf-menu > li{
            position: static;
        }
    </style>

 
    
powinno działać

Share this post


Link to post
Share on other sites

Zmodyfikowałem plik

/modules/blocktopmenu/blocktopmenu.tpl

lub

/themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

Niestety, nie działa

Share this post


Link to post
Share on other sites

w pliku /themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

po zmianach włącz kompilacje szablonu/wyczyść cache

Share this post


Link to post
Share on other sites

Świetnie! Zaczyna być dobrze.

Teraz jeszcze tylko trzeba zmienić czcionkę, przy za długich brzydko przerzuca.

menu2.jpg

 

 

 

I pytanie:

Jak zrobić, aby pierwszy wiersz był w innym kolorze niż pozostałe?

Edited by michalsX (see edit history)

Share this post


Link to post
Share on other sites

W css możesz użyć selektora child np: :nth-child(-n+6)

I co ten selektor da?

Share this post


Link to post
Share on other sites

To co chcesz, możesz nim ustawić tło czy kolor czcionki dla pierwszych sześciu elementów.

Share this post


Link to post
Share on other sites

Czy te modyfikacje robię w

blocktopmenu.css

czy

superfish-modified.css

Ścieżka:

/themes/default-bootstrap/css/modules/blocktopmenu/css/

?

Share this post


Link to post
Share on other sites

Ja bym zrobił w superfish-modified.css ale raczej nie ma to znaczenia jaki to jest plik ważne aby był wczytywany wszędzie tam gdzie się wyświetla moduł menu więc nawet dodanie tego do global.css powinno zadziałać poprawnie.

Share this post


Link to post
Share on other sites

Wprowdziłem testowo:

 
:nth-child(-n+6) {
    background: red;
}
 
Wygląda tak:
menu3.jpg

Share this post


Link to post
Share on other sites

To nie jest forum css tylko prestashop, powinieneś poczytać o selektorze child ponieważ prawdopodobnie nie zastosowałeś go do właściwego elementu, o ile w ogóle zastosowałeś go do jakiegoś konkretnego elementu a nie bezmyślnie wkleiłeś to do css.

Share this post


Link to post
Share on other sites

Jeszcze raz dziękuję. Wprowadziłem porady. Dodałem do superfish-modified.css:

 
#block_top_menu li:nth-child(-n+6) > a {
background: #333333;
font-size: 20px;
color: white;
}
 
Menu wygląda tak, jaki był zamysł:
 
menu11.jpg
 
Kolejne pytanie.
Jak zrobić, aby podkategorie rozwijały się pionowo pod kategorią a nie poziomo?

Share this post


Link to post
Share on other sites

Witam ponownie

Kolejne pytanie do menu gornego w Prescie

Pierwsze sześć przycisków menu mają szerokość 1/6 całego menu.

W drugim wierszu 1 przycisk na szerokość całego menu.

Ostatni trzeci wiersz znów sześć przycisków o szerokości 1/6 menu.

Czy jest w ogóle możliwość zrobienia, jak w projekcie w załączeniu?

 

menu12.jpg

Share this post


Link to post
Share on other sites

Tak, korzystając z parametru child możesz nadać dla elementy numer 7 szerokość 100%.

Share this post


Link to post
Share on other sites

Wszystko fajnie zadziałało.
Bardzo dziękuję za pomoc.

Pytanie:
Jak widać wyżej w menu użyty jest indeks górny i tytuł w menu jest generowany z nazwy kategorii.
Czy można w jakiś sposób zrobić indeks górny w nazwie kategorii?
Czy może jakeś inne rozwiązanie?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More