Rails простая навигация, как стиль? - PullRequest
2 голосов
/ 03 ноября 2011

Я использую простой навигационный камень для создания некоторой "простой" навигации для моего сайта.

Я уже создал меню с вкладками с CSS, JQUERY и HTML.

Единственная проблема - создание точно таких же CSS и HTML с простой навигацией.

Вот мой HTML, который я пытаюсь создать с помощью простой навигации:

<ul id="ulmenu">

<li class="topmenuli" id="menufirst">
<a href="#" class="">Frontpage<span id="frontpage"></span></a>
<ul id="submenu" style="display: none;">
  <li><a style="font-weight:bolder;text-decoration:underline;background:url(../images/menua.png) no-repeat center bottom;" href="#" class="">Submenu 1</a></li>
   <li><a href="#" class="">Submenu 2</a></li>
</ul>
</li>
<li class="topmenuli">
<span style="display:block;" id="pets"></span>
<a href="#">Pets</a>
<ul style="display:none;" id="submenu">
  <li><a href="#">Submenu 1</a></li>
  <li>Submenu 2</li>
</ul>
</li>
</ul>

Мой простой конфигурационный файл навигации:

SimpleNavigation::Configuration.run do |navigation|

    primary.item :frontpage, 'frontpage', root_url, :id => 'menufirst', :class => 'topmenuli'
    primary.item :domain, 'Pets', domain_path do |sub_nav|
      # Add an item to the sub navigation (same params again)
      sub_nav.item :dogs, 'Dogs', dogs_path
    end
  end

Выход:

<ul><li id="menufirst" class="topmenuli selected simple-navigation-active-leaf"><a class="selected" href="http://localhost:3000/"><span>Frontpage</span></a></li>
<li id="petes"><a href="/pets"><span>Pets</span></a></li></ul>

Не совсем как мой HTML. Подменю не отображаются. Я также пытался использовать подсветку, но тогда навигация по хлебным крошкам совершенно неправильная.

Как мне создать свое HTML-меню с простой навигацией?

Ответы [ 2 ]

5 голосов
/ 03 ноября 2011

чтобы изменить атрибуты в вашем <ul> контейнере, используйте (например):

primary.item :domain, 'Pets', domain_path do |sub_nav|
  sub_nav.dom_id = 'some_submenu_id'
  sub_nav.dom_class = 'some_submenu_class'
  sub_nav.item :dogs, 'Dogs', dogs_path
  # add any more items you want
end    

чтобы изменить атрибуты ваших <li> элементов:

primary.item :domain, 'Pets', domain_path, :class => 'my_class', :id => 'my_id' # etc.

также можно предоставить пользовательский генератор атрибутов id (как указано в документации ):

navigation.id_generator = Proc.new {|key| "my-prefix-#{key}"}

Что касается ваших style атрибутов, я не знаю, справится ли это с simple_navigation, но все, что вам нужно сделать, это создать несколько минимальных селекторов CSS:

.block
{
  display: block;
}

.container
{
  margin: 1em;
}

... и связанные классы:

<div class="block container">I will be displayed as a block and have a 1em margin</div>
0 голосов
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...