Найти на сайте

Меню на сайт

+23
2.79K
  2. Блоги
  3. Меню на сайт
Выкладывают все свои поделки-шаблоны, у всех практически переделка дефолтного шаба ну и конечно дефолтное меню.
Меню хорошее, слов нет. НО! На всех сайтах одинаковое меню — ну не айс...

Решил немного разнообразить.
Добавил на демо вертикальное меню.
Итак, скрин:

Иллюстрация



Продолжим
Вставляем в нужное место
  1.  
  2.             <div id="topmenuet">
  3.                 <div>
  4.                     <?php cmsModule('topmenu'); ?>
  5.                 </div>
  6.             </div>
Перед </body> вставляем
  1.  
  2.     <script type="text/javascript">
  3.         $(document).ready(function(){
  4.             $('#topmenuet .menu li').hover(
  5.                 function() {
  6.                     $(this).find('ul:first').show();
  7.                     $(this).find('a:first').addClass("hover");
  8.                 },
  9.                 function() {
  10.                     $(this).find('ul:first').hide();
  11.                     $(this).find('a:first').removeClass("hover");
  12.                 }
  13.             );
  14.         });
  15.     </script>
  16.  
Подключаем css
  1.     <link href="/templates/шаблон/css/topmenuet.css" rel="stylesheet" type="text/css" />
Архив распаковываем в папку шаблона

Демо можно посмотреть здесь

PS. Принимаются заявки…
"Фейк" Фейсбука, вариант 2
"Фейк" Фейсбука, шаблон для InstantCMS
0
googlebot googlebot 12 лет назад #
Больше меню хороших и разных:) +
0
Викторыч Викторыч 12 лет назад #
Добрый день! ) Красиво сделано! Но на коротких словах как кубик смотрится, может по высоте подобрать чуток? )
LonelyCat LonelyCat 12 лет назад #
Комментарий удален
0
Female Female 12 лет назад #

у меня сейчас такое. MadMax сразу отругал меня за дефолтное меню, за что ему спасибо!!!!!
0
12 лет назад #
Дизайн портала а-ля "Секретарша и ворд" :))))
0
lezginka.ru lezginka.ru 12 лет назад #
+
+1
Blit Blit 12 лет назад #
Еще менюшки хорошие http://shebeko.com/99-texnik-sozdaniya-menyu-dlya-sajta-css-i-jquery.html
LonelyCat LonelyCat 12 лет назад #
Комментарий удален
0
Blit Blit 12 лет назад #
Но зато какой выбор!
+1
reload reload 12 лет назад #
Решил немного упорядочить шапку сайта (вернее убрать ее) - понадобилось лого сайта поставить вместо первого пункта меню "главная"... Идея не мегоуникальна, но кто любит компактность - самое оно) так как в данном случае меню выступает в роли шапки)

в template.php место там где меню выглядело так:
Код PHP:
<div id="header">
            <div class="container_12">
                <div class="grid_3">
                    <div id="sitename"><a href="/"></a></div>
                </div>
                <div class="grid_9">
                
                        <?php cmsModule('header'); ?>
                   
                </div>
            </div>
        </div>

        <div id="page">

            <div class="container_12" id="topmenu">
                <div class="grid_12">
                    <?php cmsModule('topmenu'); ?>
                </div>
            </div>
Удаляем его от сюда и записываем так:

Код PHP:
<div id="header">
            <div class="container_12">
                <div class="grid_2">
                    <div id="sitename"><a href="/"></a></div>
                </div>
            
                <div class="grid_10" id="topmenu">
                    <?php cmsModule('topmenu'); ?>
                </div>
            </div>
        </div>
и правим стили под себя (это измененный с дефлота 1.8)
Код PHP:
/***************************** Шапка страницы *********************************/

#header{
    height:60px;
}

#sitename a{
    display:block;
    height:50px;
    margin-top:15px;
    margin-bottom:10px;
    background:url(../images/menuleft.png) no-repeat;
    width:160px;
}

#page{
    padding-bottom:20px;

}

/******************************* Верхнее меню *********************************/
#topmenu{
    overflow:hidden;
    margin-top:15px;
    margin-bottom:10px;
    background:url(../images/menuright.png) no-repeat;
    width:780px;
}

#topmenu .menu{ list-style:none; margin:0; padding:0 0 0 10px; }
#topmenu .menu li a{ text-decoration:none; }
#topmenu .menu li{
    list-style:none; 
    margin:0;
    padding:0;
    height:50px;
    line-height:50px;
    display:inline-block;
	//display: inline;
	zoom: 1;
    font-size:18px;
    //position: relative;
}

#topmenu .menu li.selected{
    background:url(../images/menubg.png) repeat-x left top;
}

#topmenu .menu li.selected a.selected{
    color:#fff;
    text-decoration:none;
    text-shadow:0 1px 0 #000;
}

#topmenu .menu li a:hover,
#topmenu .menu li a.hover{
    background:url(../images/menubg-hover.png) repeat-x center top;
    color:#000 !important;
    text-shadow:0 1px 0px #FFF !important;
}

#topmenu .menu li a{
    padding:0px 10px;
    color:#1F3451;
    height:50px; 
    line-height:50px;
    display:inline-block;
}

#topmenu ul li ul {
    display:none;
    position: absolute;
    //top:40px;
    //left:0;
	width: 200px;
	background: #E9E9E9;
	color: #000;
    padding:0px;
    z-index:1000;
    box-shadow:1px 1px 3px #000;
    -moz-box-shadow:1px 1px 3px #000;
}
#topmenu ul li ul li ul {
    display:none;
    position: relative;
    margin-top:-155px;
    left:200px;
	width: 200px;
	background: #E9E9E9;
	color: #000;
    padding:0px;
    z-index:1000;
    box-shadow:1px 1px 3px #000;
    -moz-box-shadow:1px 1px 3px #000;
}

#topmenu ul li ul li,  #topmenu ul li ul li a{
    display:block;
    width:100%;
}

#topmenu ul li ul li a{
    padding:0px !important;
    text-decoration:none;
}
#topmenu ul li ul li a span{
    margin:0px 10px;
    padding:0px;
}

#topmenu ul li ul li a.selected span{
    text-decoration:none;
}
menuleft.png:

menuright.png:


Далее в настройках меню нужно отключить показ "главная"
Если что то не получается создайте новый модуль-меню копию основного меню.
Все описанное приведено для примера, стили css нужно изменять под свой дизайн!

Меню сделанное по данному примеру можно посмотреть ЗДЕСЬ
LonelyCat LonelyCat 12 лет назад #
Комментарий удален
0
reload reload 12 лет назад #
я немного тебя не понял... ты это кому тут написал? и притом мое решение)))) хоть указывай кто это делал.
Написано для пользователей - может кому пригодится. Кто именно помог разобраться - извини не помню, очень много людей помогают разобраться как реализовать (мои идеи!) Основные часто помогающие люди: LonelyCat, Mike, Fuze, CozaNostra, Madmax... За помощь еще раз спасибо!
Зачем плодить новые темы - если даже пользователям удобно когда все аналогичное в одном месте.
Даже не мог подумать что возможна такая реакция) если мешает - попросите админов - удалят)
зы: Всем хорошим людям еще раз огромная благодарность за помощь в реализации определенных идей
0
reload reload 12 лет назад #
Что бы не мучатся с картинками - в css можно просто указать цвет фона, а лого сделать прозрачным - у меня реализовано именно так.
LonelyCat LonelyCat 12 лет назад #
Комментарий удален
0
Николай Николай 12 лет назад #
помогите, а почему, вот пример в картинках. Поставил, зашел под админом на сайт - все великолепно - нравится )


но когда нажимаешь на кнопку выход, то картинки пропадают и становятся просто слова ((((



что не так ? спасибо заранее
LonelyCat LonelyCat 12 лет назад #
Комментарий удален
0
artlab artlab 12 лет назад #
Есть отличная прога для создания флеш меню Flash Menu Lab (активированая версия) .Кому надо-пишем в личку,поделюсь.По правилам здесь выкладывать нельзя.))
0
Виталий Виталий 12 лет назад #
Плюс Коту

Еще от автора

Другие колонки для шаблона

Другие колонки для шаблона

Приветствую сообщество. Давненько меня тут не было))) По просьбе raiden сделал вывод еще одного sidebar-а.
25
"Фейк" Фейсбука для 1.10.1

"Фейк" Фейсбука для 1.10.1

После длительного отсутствия - почти год), шаблон для 1.10.1 ---- по неоднократным просьбам ---- Продолжение этой темы.
31
Модуль "Последние комментарии" с прокруткой

Модуль "Последние комментарии" с прокруткой

Используем те же файлы, что и в предыдущем моем посте, меняем только mod_comments.
11

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.