Добро пожаловать, Гость. Пожалуйста, выберите Вход или Регистрация
Привет.лв Главная Справка Поиск Вход Регистрация
Страниц: 1 2 3 
Печать Bookmark and Share
Удалить этот блок рекламы?
Удали рекламу
Einplac CMS v1.0 - Выпадающее меню. (Прочитано 27973 раз)
zhenin
Никем не отмечен
*
Вне Форума



Сообщений: 2
EU - Latvia
Пол: male
Einplac CMS v1.0 - Выпадающее меню.
23.01.2011 :: 22:57:01
 
Здравствуйте, этот проект - интересный вариант cms для меня,
вполне устраивает шаблон по умолчанию, но не могли бы вы
сделать для него (или любого другого шаблона)
всплывающее меню если не ошибаюсь drop down menu.
быть может есть какое-нибудь готовое решение, которое не трудно внедрить?...
Наверх
 
« Последняя редакция: 24.01.2011 :: 07:58:41 от Ramzies »  
7098279   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #1 - 24.01.2011 :: 08:06:29
 
Привет, попробуй такое решение:
Авторизуясь в админке щелкаешь 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> 




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

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
zhenin
Никем не отмечен
*
Вне Форума



Сообщений: 2
EU - Latvia
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #2 - 24.01.2011 :: 11:22:19
 
Привет! Спасибо тебе добрый человек, все получилось, все работает как атомные часы  Очень довольный
Вопросов много, но буду задавать постепенно чтоб не надоедать..
Интересует, как сделать "title, description, keywords"  для каждой страницы разные?
желательно так же с минимум кода, максимум скорости.

P.S. Спасибо за быстрый ответ. Идеология html понятна  Подмигивание
Наверх
 
 
7098279   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #3 - 24.01.2011 :: 11:38:59
 
zhenin писал(а) 24.01.2011 :: 11:22:19:
Привет! Спасибо тебе добрый человек, все получилось, все работает как атомные часы  Очень довольный
Вопросов много, но буду задавать постепенно чтоб не надоедать..
Интересует, как сделать "title, description, keywords"  для каждой страницы разные?
желательно так же с минимум кода, максимум скорости.

P.S. Спасибо за быстрый ответ. Идеология html понятна  Подмигивание


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

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

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Ivan34
Никем не отмечен
*
Вне Форума

Я люблю
www.privet.lv

Сообщений: 35

Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #4 - 06.11.2012 :: 08:30:08
 
А возможно, как-то сделать чтобы под пункт меню открывался по клику?? а не при навидении?
Наверх
 
 
  IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #5 - 06.11.2012 :: 09:23:35
 
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>  

Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Ivan34
Никем не отмечен
*
Вне Форума

Я люблю
www.privet.lv

Сообщений: 35

Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #6 - 06.11.2012 :: 09:45:36
 
Я так же думал изночально, но нажимаю, а меню не выежает. Может надо и в цсс что-то изменить?
Наверх
 
 
  IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #7 - 06.11.2012 :: 10:34:04
 
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>  



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

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Ivan34
Никем не отмечен
*
Вне Форума

Я люблю
www.privet.lv

Сообщений: 35

Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #8 - 06.11.2012 :: 12:38:42
 
Вставил такой код, тепер меню открывается по клику и сразу же закрывается, не успеваю даже мышкой пощевелить. +(
Наверх
 
 
  IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #9 - 06.11.2012 :: 13:36:58
 
Как писал выше выпадающее меню пропадет после того как курсор выйдет за его рамки. Попробуйте поиграться с top, сделайте его меньше. Т.к. скорее всего у вас между кнопкой на которую вы нажимаете и выпадающим меню есть пустой промежуток, попав на который и закрывается ваше меню - т.к. мышка таким образом выходит из вашего выпадающего меню.

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




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

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

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

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Ivan34
Никем не отмечен
*
Вне Форума

Я люблю
www.privet.lv

Сообщений: 35

Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #10 - 06.11.2012 :: 15:10:57
 
уххх, если чесно уже голова кипит, но уже что-то получается. Чтобы я без Вас делал.
Вот такой не большой вопрос, а такое реально сделать. Сейчас меню открывается по клику, а закрывается когда уходим из области. А можно сделать так, чтобы открывалось по клику, и закрывалось по клику. По моему это в явескрпит не реально да? Ну или когда кликаешь на другое меню, закрывалось старое.


Вот увидил пример: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
, может его можно как-то вставить?
Наверх
 
« Последняя редакция: 06.11.2012 :: 20:53:57 от Ramzies »  
  IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Einplac CMS v1.0 - Выпадающее меню.
Ответ #11 - 06.11.2012 :: 21:00:27
 
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>  

Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
Страниц: 1 2 3 
Печать Bookmark and Share
www.privet.lv

Privet.lv/forum » Powered by YaBB 2.2.3 (fix)!
YaBB © 2000-2012. Все права защищены.
Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge