VPF::Добавить пункт в меню - Форум программистов

nightvi

Дата 29.7.2014, 11:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 78
Регистрация: 20.7.2007

Репутация: нет
Всего: нет

Добрый день подскажите как статически добавить пункт в меню чтобы вел на главную страницу
Но надо чтобы только в мобильной версии он появлялся
вот код менюшки

Код


(function($){
    
    //plugin's default options
    var settings = {
        prependTo: 'nav',                //insert at top of page by default
        switchWidth: 768,                //width at which to switch to select, and back again
        topOptionText: 'Выберите пункт меню:'    //default "unselected" state
    },
    
    menuCount = 0,                        //used as a unique index for each menu if no ID exists
    uniqueLinks = [];                    //used to store unique list items for combining lists

    //go to page
    function goTo(url){document.location.href = url;}
    
    //does menu exist?
    function menuExists(){return ($('.mnav').length) ? true : false;}

    //validate selector's matched list(s)
    function isList($this){
        var pass = true;
        $this.each(function(){
            if(!$(this).is('ul') && !$(this).is('ol')){
                pass=false;
            }
        });
        return pass;
    }//isList()

    //function to decide if mobile or not
    function isMobile(){return ($(document).width() < settings.switchWidth);}
    
    //function to get text value of element, but not it's children
    function getText($item){return $.trim($item.clone().children('ul, ol').remove().end().text());}
    
    //function to check if URL is unique
    function isUrlUnique(url){return ($.inArray(url, uniqueLinks) === -1) ? true : false;}

    //function to create options in the select menu
    function createOption($item, $container, text){
        //if no text param is passed, use list item's text, otherwise use settings.groupPageText
        var $selected, $disabled, $sel_text;
        
        if ($item.hasClass('current')) $selected='selected';
        if ($item.hasClass('disabled')) {
            if ($('.current').length) $disabled='disabled';
            else $disabled='selected';
        }
        
        $sel_text=$.trim(getText($item));
        $sel_text = $sel_text.replace('›', '');
        if ($item.parent('ul ul').length) $sel_text = ' – ' + $sel_text;
        if ($item.parent('ul ul ul').length) $sel_text = '– ' + $sel_text;
        if ($item.parent('ul ul ul ul').length) $sel_text = '– ' + $sel_text;

        if(!text){$('<option value="'+$item.find('a:first').attr('href')+'" ' + $selected + ' ' + $disabled + '>' + $sel_text +'</option>').appendTo($container);}
        else {$('<option value="'+$item.find('a:first').attr('href')+'" ' + $selected + ' ' + $disabled + '>'+text+'</option>').appendTo($container);}
    }//createOption()
    
    //function to create submenus
    function createGroup($group, $container){
        //loop through each sub-nav list
        $group.children('ul, ol').each(function(){
            $(this).children('li').each(function(){
                createOption($(this), $container);
                
                $(this).each(function(){
                    var $li_ch = $(this),
                        $container_ch =  $container;
                    createGroup($li_ch, $container_ch);
                });
            });
        });
        
    }//createGroup()
    
    //function to create <select> menu
    function createSelect($menu){
        //create <select> to insert into the page
        
        var $select = $('<select id="mm'+menuCount+'" class="mnav">');
        menuCount++;
        
        //create default option if the text is set (set to null for no option)
        if(settings.topOptionText){
            
            
            
            createOption($('<li class="disabled"><a href="#">'+settings.topOptionText+'</a></li>'), $select);}
        
        //loop through first list items
        $menu.children('li').each(function(){
            var $li = $(this);

            //if nested select is wanted, and has sub-nav, add optgroup element with child options
            if($li.children('ul, ol').length){
                createOption($li, $select);
                createGroup($li, $select);
            }
            
            //otherwise it's a single level select menu, so build option
            else {createOption($li, $select);}
        });
        
        //add change event and prepend menu to set element
        $select
            .change(function(){goTo($(this).val());})
            .prependTo(settings.prependTo);
    }//createSelect()

    
    //function to run plugin functionality
    function runPlugin(){
        //menu doesn't exist
        if(isMobile() && !menuExists()){
            $menus.each(function(){
                createSelect($(this));
            });
        }

        //menu exists, and browser is mobile width
        if(isMobile() && menuExists()){
            $('.mnav').show();
            $menus.hide();
        }

        //otherwise, hide the mobile menu
        if(!isMobile() && menuExists()){
            $('.mnav').hide();
            $menus.show();
        }
    }//runPlugin()

    //plugin definition
    $.fn.mobileMenu = function(options){
        //override the default settings if user provides some
        if(options){$.extend(settings, options);}
        //check if user has run the plugin against list element(s)
        if(isList($(this))){
            $menus = $(this);
            runPlugin();
            $(window).resize(function(){runPlugin();});
        } else {
            alert('mobileMenu only works with <ul>/<ol>');
        }
    };//mobileMenu()
})(jQuery);

$(document).ready(function(){
    $('.menu').mobileMenu();
});

Код


<nav>
<ul class="menu responsive-menu">

    {if $cfg.show_home}
        
    {/if}

 {assign var="last_level" value=0}   
    {foreach key=key item=item from=$items}

        {if $item.NSLevel == $last_level}</li>{/if}
        {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
        {section name=foo start=0 loop=$tail step=1}
            </li></ul>
        {/section}

        {if $item.NSLevel <= 1}
            <li class="{if $item.id==23}raspolozhenie {/if}{if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}current{/if}">
        {/if}
        {if $item.NSLevel <= 1}
<a href="{$item.link}" target="{$item.target}" class="{$item.iconurl}" title="{$item.title|escape:'html'}">{$item.title}</a>
        {else}
            {if $item.NSLevel > $last_level}<ul>{/if}
                <li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight))}class="current"{/if}>
<a href="{$item.link}" target="{$item.target}" class="{$item.iconurl}" title="{$item.title|escape:'html'}">{$item.title}</a>
        {/if}
        {assign var="last_level" value=$item.NSLevel}
    
    {/foreach}
        </li></ul>

</nav>

Это сообщение отредактировал(а) nightvi - 29.7.2014, 13:22

Aliance

Дата 29.7.2014, 12:45 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Когда задаете вопрос по какому-либо написанному (тем более не маленькому) коду, лучше сразу его оформлять где-либо, чтобы отвечающие на это не тратили свое время.
Вы же забыли привести пример html разметки для работы скрипта. Добавьте сюда и пересохраните: http://jsfiddle.net/Aliance/qDg32/

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

nightvi

Дата 29.7.2014, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 78
Регистрация: 20.7.2007

Репутация: нет
Всего: нет

Добавил, показало начало списка а как вставить то саму эту ссылку?

Aliance

Дата 29.7.2014, 16:08 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Изменить/дополнить код по моей ссылке, нажать Update и кинуть сюда новую ссылку.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

nightvi

Дата 29.7.2014, 17:15 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 78
Регистрация: 20.7.2007

Репутация: нет
Всего: нет

http://jsfiddle.net/qDg32/1/ вот

Aliance

Дата 30.7.2014, 13:18 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

почти то, что нужно, только вы сами-то запускали кнопку Run? Там же не сгенерированный html, а код шаблонизатора. А нужно первое.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

nightvi

Дата 30.7.2014, 22:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 78
Регистрация: 20.7.2007

Репутация: нет
Всего: нет

Хм вопрос интересный тут такой корявый пхп что я с трудом в нем разбираюсь дали дописать сайт вот и мучаюсь. я даже не знаю где тот самый хтмл есть индексовский файл в нем только пхп есть теплейтовский файл в нем есть немного хтмл в котором прописано <?php cmsModule('topmenu'); ?> и уже этот модуль грузит тот кусок кода который я дал

Aliance

Дата 31.7.2014, 09:04 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

готовую разметку html можно получить в браузере при просмотре странички (правый клик - просмотр исходного кода)

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

nightvi

Дата 31.7.2014, 16:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 78
Регистрация: 20.7.2007

Репутация: нет
Всего: нет

Код


<nav>
<ul class="menu responsive-menu">
                    <li class="raspolozhenie ">
                <a href="/raspolozhenie.html" target="_self" class="bg-color0" title="Расположение">Расположение</a>
    </li>        
                  <li class="">
                <a href="/genplan.html" target="_self" class="bg-color3" title="Генплан">Генплан</a>
       </li>        
                   <li class="">
                <a href="/doma.html" target="_self" class="bg-color4" title="Дома">Дома</a>
       </li>        
                   <li class="">
                <a href="/cena.html" target="_self" class="bg-color1" title="Цена">Цена</a>
     </li>        
               <li class="">
                <a href="/hod-stroitelstva.html" target="_self" class="bg-color2" title="Динамика">Динамика</a>
      </li>        
                    <li class="">
                <a href="/dosug.html" target="_self" class="bg-color5" title="Досуг">Досуг</a>
      </li>        
                  <li class="">
                <a href="/kontakty.html" target="_self" class="bg-color6" title="Контакты">Контакты</a>
           </li></ul>

</nav>

данный код одинаковый и на большом и на маленьком экране но надо чтобы ссылка главная появлялась только на маленьком экране

Это сообщение отредактировал(а) nightvi - 31.7.2014, 16:21

Aliance

Дата 1.8.2014, 08:21 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Цитата(nightvi @ 31.7.2014, 17:18

)

надо чтобы ссылка главная появлялась только на маленьком экране

что-то я ее не вижу в разметке выше.

но в любом случае, не вижу необходимости вовсе в JS, ведь такое обычно реализуется с помощью css media-queries (посмотреть пример можно в Twitter Bootstrap).

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »