Привет, попробуй такое решение:
Авторизуясь в админке щелкаешь 2 раза на меню (или открываешь файл /files/attachment1.txt) и вставляешь туда
Код:

	  <ul id="menu">
	  <li><a href="./">Меню 1</a></li>
	  <li><a href="#">Меню 2</a>
		<ul>
		   <li><a href="#">Элемент 2.1</a></li>
		   <li><a href="#">Элемент 2.2</a></li>
		   <li><a href="#">Элемент 2.3</a></li>
		</ul>
	  </li>
	  <li><a href="#">Меню 3</a>
		<ul>
		   <li><a href="#">Элемент 3.1</a></li>
		   <li><a href="#">Элемент 3.2</a></li>
		   <li><a href="#">Элемент 3.3</a></li>
		</ul>
	  </li>
	  </ul> 

Идеология этого надеюсь понятна. В <a href="#"> вместо # пишешь ./?page=social вместо social - название своей страницы которую хочешь создать (латинскими буквами).


В файл style.css необходимо добавить такие строки:
Код:

#menu, #menu li{
display: inline;
margin-right:2px;
}
#menu li {
float: left;
position:relative;
width:140px;
}
#menu li a{
display: block;
margin:1px 0px;
}
#menu li ul{
display: none;
position:absolute;
top:26px;
}
#menu li ul li, .active {
display:block !important;    
} 

Обрати внимание на width:140px; это длина кнопки, ты их можешь сделать длиннее или короче.




И последний штрих, открываешь файл template/default.tpl там в верху ищешь:
Код:

<script type="text/javascript" src="./js/jquery.min.js"></script>
<?php echo displayEditLibrary(); ?> 

И после этого добавляешь:
Код:

<script type="text/javascript">
$(document).ready(function(){
   $('#menu li').hover(
	  function() {
		$(this).find('ul').addClass('active');
	  },
	  function() {
		$(this).find('ul').removeClass('active');
	  }
    );
});
</script> 

Вобщем-то и все. Будут вопросы пиши.

zhenin писал(а) 24.01.2011 :: 11:22:19:


Вижу не только html понятен но и в SEO оптимизации разбираетесь
Но к сожалению "title, description, keywords" на данный момент каждой странице свой ставить нельзя. Через несколько месяцев выложу новую версию Einplac CMS, с возможность редактирования этих элементов для каждой странице + появится встроенный wysiwyg. Чем быстрее CMS будет более популярна тем быстрее появятся новые функции.

Еще что касается выпадающего меню. При попытке его редактирования следите что бы не появилась выпадающее меню. Т.к. ему в таком случае присвоится class="active" и в дальнейшем оно будет постоянно открыто. В таком случае еще раз двойным нажатием мышки откройте редактор навигации и удалите в коде появившийся class="active".

Ivan34 писал(а) 06.11.2012 :: 08:30:08:


Для этого необходимо hover,
Код:

<script type="text/javascript">
$(document).ready(function(){
   $('#menu li').hover(
	  function() {
		$(this).find('ul').addClass('active');
	  },
	  function() {
		$(this).find('ul').removeClass('active');
	  }
    );
});
</script>  

Заменить на click, вот так
Код:

<script type="text/javascript">
$(document).ready(function(){
   $('#menu li').click(
	  function() {
		$(this).find('ul').addClass('active');
	  },
	  function() {
		$(this).find('ul').removeClass('active');
	  }
    );
});
</script>  

Ivan34 писал(а) 06.11.2012 :: 09:45:36:


Ох да, вы правы, действительно не будит работать. т.к. в click не может быть несколько function. Для того что бы работало при нажатие необходимо сделать так Код:

<script type="text/javascript">
$(document).ready(function(){
   $('#menu li').click(
	  function() {
		$(this).find('ul').addClass('active');
	  }
    );
   $('#menu li').hover(
	  function() {
		$(this).find('ul').removeClass('active');
	  }
    );

});
</script>  

В данном примере. Выпадающее меню появляется только после нажатия на раздел и пропадет после того как курсор выйдет за рамки выпавшего меню.

Как писал выше выпадающее меню пропадет после того как курсор выйдет за его рамки. Попробуйте поиграться с top, сделайте его меньше. Т.к. скорее всего у вас между кнопкой на которую вы нажимаете и выпадающим меню есть пустой промежуток, попав на который и закрывается ваше меню - т.к. мышка таким образом выходит из вашего выпадающего меню.

Код:

#menu li ul{
display: none;
position:absolute;
top:26px;
} 

К сожалению здесь нет каких либо универсальных решений которое будет работать везде. Вам нужно самому подгонять это все под свой дизайн, под свои кнопки.

Так же если вы надумаете делать полностью свой дизайн наверняка в будущем вы сталкнетесь с кроссбраузерностью, это головная боль всех верстальщиков. В одном браузере у вас будет все работать, в другом нет, в третьем на половину. И это касается не только этого выпадающего меню. Это касается практически всего на сайте. И если вы хотите сделать действительно хороший сайт, хорошо работающий во всех браузерах и любимым поисковыми системами google, yandex и другими, т.к. сейчас мало делать просто сайт. Его нужно делать так что б он нравился и поисковым системам (роботам), если вы конечно хотите видеть свой сайт хотя бы на 3-ей странице в поисковой выдаче. Иначе о вашем сайте просто никто не узнает. Вам нужно набраться большого терпения и уймы свободного времени и нужно экспериментировать, экспериментировать и еще раз экспериментировать.

Напугал? В IT сфере есть еще много страшных слов и нудных вещей. А в целом что я хотел сказать, - дак это ничего что что-то не работает, это нормально. Все приходит с опытом.

Ivan34 писал(а) 06.11.2012 :: 15:30:19:

Ой замучаетесь вы с этим скриптом, там нужно подгружать дополнительный js файл на страницы, к тому же придется делать множество мелких изменений дабы подогнать его.


Цитата:

Ну почему, можно и на JavaScript. И это даже проще чем выше написанные мною примеры
Код:

<script type="text/javascript">
$(document).ready(function(){

 $('#menu li').click(function(){
 	  $(this).find('ul').toggle();
    });

});
</script>  

Ну и как бонус придумал еще 1 способ. Нажимая на кнопку, появляется подменю. А для того что б его закрыть необходимо нажать в любое место на сайте или же открыть другое меню.

Вот Код:

<script type="text/javascript">
$(document).ready(function(){

 $('#menu li').click(function(){ // Отслеживаем нажатие в меню
	$("#menu li").find('ul').removeClass('active'); // Смотрим если какое-то выпадающее меню открыто, закрываем его
	$(this).find('ul').addClass('active'); //Открываем меню
	return false;
    });
    $('body').click(function(){ // Отслеживаем нажатием в любом месте на сайте
	 $("#menu li").find('ul').removeClass('active'); //Закрываем все меню.
   });

});
</script>