Проблемы с интеграцией jquerry меню

MAnton

Осваиваюсь на форуме
11
0 / 0

Проблемы с интеграцией jquerry меню

« : 18.12.2013, 21:39:45 »

Доброго времени суток!

Сражаюсь за правое дело больше недели по вечерам, и сдаётся мне, что опыта я сам не наберусь

В статике всё работает корректно, но прикрутить этот CSS к меню на Joomle не получается никак. Бубен порвался =)
Тут то-ли div dropdown надо вставить каким-то образом в лист, то-ли реструктурировать CSS!?

Есть ссылка на облако с возможностью редактирования: https://skydrive.live.com/redir?resid=D5D0A063127825E0!1199&authkey=!AIoPU-eCfaeUsKI&ithint=folder%2c.css

А исходные данные такие:

Код: css

  .main {width: 940px; margin: 0 auto}
	.menu {border-radius: 4px; background: #777}
  .link2 {word-spacing: 60px; font-size:14px; text-transform: uppercase; font-weight: bold; width: 940px; height: 36px; margin: 16px auto; text-align:center}
  a:link {color:#5380ad; text-decoration:none}
  a:hover {color:#9ac2e9; text-decoration: none;}
  a:active {color:#000; font-family:sans-serif; font-size:15px; text-decoration:none}
  
	/* style for horizontal nav */	
	#navigation_horiz {height: 36px; width:720px; margin: 0 auto; text-align:center; clear:both}
	#navigation_horiz  ul {display:block; margin: auto; padding: auto; position:relative; padding-top: 10px}
	#navigation_horiz  ul li {display:block; float: left; margin: auto; padding: auto; position:relative; width: 20%}
	#navigation_horiz  ul li a.navlink {font-size:14px; text-transform: uppercase; font-family:sans-serif; display:block; height:26px; color:#E8EAEC;
    text-decoration:none; font-weight: bold}
       #navigation_horiz  ul li a:hover.navlink {display:block; height:26px; color:#fff; text-decoration:none}
	#navigation_horiz .dropdown {text-align:left; position:absolute; border-radius: 6px; z-index: 31}

		/* style for each drop down - horizontal */
	#navigation_horiz ul li #dropdown_one {line-height:100%; background-color: #556d94; opacity: 0.85; padding: 20px 14px}
	#navigation_horiz ul li #dropdown_one a {color:#fff; font-family:sans-serif; font-size:15px; text-decoration:none}
	#navigation_horiz ul li #dropdown_one a:hover {color:#9ac2e9}
	#navigation_horiz ul li #dropdown_two {color:#fff; line-height:100%; background-color: #556d94; opacity: 0.85; padding: 14px; margin-left: -174px;
    font-family:sans-serif; font-size:14px; text-decoration:none; line-height: 2; text-align:left }
	#navigation_horiz ul li #dropdown_two a {text-decoration:none; color:#9ac2e9}
        #navigation_horiz ul li #dropdown_two a:hover {color:#fff}

Код: html4strict

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/jquery.naviDropDown.1.0.js"></script>
<script type="text/javascript">
$(function(){
    
    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '400px'
    });
    
    });
</script>
</head>

<body>
<div class="main">
<div class="menu">
<div id="navigation_horiz">
<ul>
<li><a href="" class="navlink">link</a></li>
<li><a href="" class="navlink">link</a>
<div class="dropdown" id="dropdown_one">           
<p><a href="#">link</a></p>
<br>                                            
<p><a href="#">link</a></p>
<br>
<p><a href="#">link</a></p>
<br>
<p><a href="#">link</a></p>
                                            
    </div><!-- .dropdown --> 
                                    </li>
                                    <li><a href="" class="navlink">link</a></li>
                   <li>
                        <a href="" class="navlink">link</a>  
                  </li><li>
                        <a href="" class="navlink">link</a>
                        <div class="dropdown" id="dropdown_two">        
texttexttexttexttexttexttexttexttexttext<a href="#">text &gt;&gt;</a>
                        </div><!-- .dropdown_menu -->            
                    </li>
                </ul>
    </div><!-- #navigation_horiz -->

</div>
</div>
</body>

Записан

Shustry

Moderator
6434
745 / 3

Кликабельность псевдоэлемента в пункте меню Автор vasilii.pupkov	Ответов: 4 Просмотров: 3606	29.12.2021, 23:15:38 от v42bis
Выпадающее меню Автор DrShepard	Ответов: 10 Просмотров: 3037	20.10.2021, 12:36:16 от DrShepard
Как закруглить края выпадающего меню? Автор coliandra	Ответов: 1 Просмотров: 1510	11.12.2020, 21:15:57 от effrit
При прокрутке страницы виджет залезает на меню Автор coliandra	Ответов: 2 Просмотров: 1433	27.11.2020, 11:33:58 от coliandra
Как убрать маркер только из одного пункта меню. Автор kuraev64	Ответов: 2 Просмотров: 1679	20.07.2020, 11:18:44 от kuraev64

Новогодние скидки от Nevigen.com

Astroid обновился до версии 3.3.7!

Как тестировать Joomla PHP-разработчику? Компонент Patch tester.

Похожие темы