Jump to content

Menu górne - stała szerokość

michalsX

By michalsX
in Forum ogólne

 Share

Recommended Posts

selljus.pl Newbie

selljus.pl

Posted
Posted

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.

Link to comment
Share on other sites
amanet Newbie

amanet

Posted
Posted

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.

 

Link to comment
Share on other sites
michalsX Newbie

michalsX

Posted
  • Author
Posted

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

Link to comment
Share on other sites
michalsX Newbie

michalsX

Posted
  • Author
Posted

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;
            }
        }
    }
Link to comment
Share on other sites
atomek Enthusiast

atomek

Posted
Posted

ż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ć

Link to comment
Share on other sites
endriu107 Grand Master

endriu107

Posted
Posted

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.

Link to comment
Share on other sites
michalsX Newbie

michalsX

Posted
  • Author
Posted

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?
Link to comment
Share on other sites
  • 11 months later...
michalsX Newbie

michalsX

Posted
  • Author
Posted

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

Link to comment
Share on other sites
michalsX Newbie

michalsX

Posted
  • Author
Posted

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?

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...