Javascript или Css или Jquerry

  • Автор темы TimeDontWait
  • Дата начала
T

TimeDontWait

#1
Добрый день, уважаемые.
Итак, заморачиваюсь с сайтом, столкнулся с одной неувязкой.
Сразу говорю - php отсутствует.
1) есть у нас вертикальное меню;
2) у неких разделов есть свои подразделы;
Допустим - "Клан", подразделы: "Устав","Состав".
При переходе на "Клан" нужно реализовать страницу с горизонтальным меню(типа категории)
"Устав" и "Состав". Чтоб при выборе Устава - отображался один блок, при Составе другой.
Это могу сделать при помощи CSS, при обращении к функции javascript (меняя стиль) скрывать-отображать нужное.
Есть поддержка jquerry.
Как можно реализовать такое меню при помощи категорий. Тоесть, если у раздела есть подразделы, чтоб меню автоматически показывалось. Или при помощи jquerry обновлять блок.
Или лучше оставить CSS + javascript.
Может кто делал такое, дайте пожалуйста код, или натолкните на правильный путь.
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#2
Ну.. Это легко делается на чистом цсс. Загугли Меню на CSS. Как готовый пример
elinext.com
Меню там сделано списком:
<!--shcode--><pre><code class='html'> <ul id="hmenu">

<li><a href="/">Home</a> </li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/mobiledevelopment">Mobile applications</a></li>
<li><a href="/cloudcomputing">Cloud computing</a></li>
<li><a href="/webdevelopment">Web solutions</a></li>

<li><a href="/itinfrastructure">IT infrastructure management</a></li>
<li><a href="/rnd">R&D Services</a></li>
<!--<li><a href="#">Accelerated product development</a></li>-->
</ul>
</li>

<li><a href="/competencies">Competencies</a>


</li>
<li><a href="/resource">Resources</a>
<ul>
<li><a href="/casestudies">Case studies</a></li>
<li><a href="/articlesmain">Articles</a></li>
<li><a href="/presentation">Presentations</a></li>

<li><a href="/freesoftware">Free software</a></li>
<!--<li><a href="#">Free services</a></li>-->
<!--<li><a href="#">Press releases</a></li>-->
</ul>
</li>
<li><a href="/company">About Us</a>
<ul>
<li><a href="http://www.elinext.com/overview">Company Overview</a></li>

<li><a href="http://www.elinext.com/partnershipmodels">Working Models</a></li>
<li><a href="http://www.elinext.com/customers">Clients</a></li>
<li><a href="http://www.elinext.com/customertestimonials">Testimonials</a></li>
<li><a href="http://www.elinext.com/management">Management</a></li>
<li><a href="/socialnetworks">Media channel</a></li>
<li><a href="http://www.elinext.com/events">Events</a></li>

</ul>
</li>
<li><a href="/contact">Contacts</a> </li>
</ul>[/CODE]
<!--shcode--><pre><code class='css'>ul#hmenu {
float:left;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
height: 48px;
font: bold 12px/28px Tahoma;
line-height: 48px;
}

ul#hmenu li {
margin: 0;
border-width:1px;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
background-image:url('/images/menuBg.jpg');

}

ul#hmenu ul {
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
display: none;
position: absolute;
top: 49px;
left: 0;
z-index: 1;
}

ul#hmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#hmenu ul ul li a:hover
{
background-color: #808298 !important;
color: #F6F6F6 !important;
opacity: 1 !important;
border-left: #FFFFFF solid 1px;
}
ul#hmenu ul li a
{
padding-top: 0px;
font-size: 13px !important;
}
ul#hmenu ul ul li a
{
background-color: #FFFFFF !important;
color: #393939 !important;
opacity: 0.95!important;
filter: alpha(opacity=95)!important;
border-left: 1px;
border-left: #FFFFFF solid 1px;
}

ul#hmenu ul li {
width: 240px;
float: left;
display: block !important;
display: inline;
background-image:none;
}

/* Main Menu */
#menuShell
{
width:975px;
background-image:url('/images/menuBg.jpg');
}
ul#hmenu a {
border: 0px;
padding: 0 13px;
float: none !important;
float: left;
display: block;
background-image:url('/images/menuWhite.jpg');
background-repeat:no-repeat;
color: #393939;
font: bold 12px/28px Tahoma;
text-decoration: none;
height: auto !important;
height: 1%;
line-height: 48px;
padding-top: 2px;
}

/* Main Menu Hover */
ul#hmenu a:hover,
ul#hmenu li:hover a,
ul#hmenu li.iehover a {
background-image:url('/images/menuBgHover.jpg');
color: #393939;
background-repeat:repeat;
}

/* Second Menu */
ul#hmenu li:hover li a,
ul#hmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #F6F6F6;
color: #474747;
font-size: 8pt;
font-weight:normal;
line-height: 30px;
opacity: 0.95;
filter: alpha(opacity=95);
}

/* Second Menu Hover */
ul#hmenu li:hover li a:hover,
ul#hmenu li:hover li:hover a,
ul#hmenu li.iehover li a:hover,
ul#hmenu li.iehover li.iehover a {
border-top: 1px solid #FFFFFF;
background: #808298;
color: #FFFFFF;
opacity: 1;
}

ul#hmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 240px;
}

ul#hmenu li:hover ul ul,
ul#hmenu li.iehover ul ul {
display: none;
}

ul#hmenu li:hover ul,
ul#hmenu ul li:hover ul,
ul#hmenu li.iehover ul,
ul#hmenu ul li.iehover ul {
display: block;
}[/CODE]
Cамое оно в li:hover
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#4
European
Я ничего не подписывал. И вообще, моя интеллекутальная собсвтенность)
 

1ive

Well-known member
12.09.2010
621
1
#5
Вот код:
Используется Yahoo API
"YAHOO.widget.TabView"
Думаю, объяснять не нужно?


Выглядит ТАК


Код:
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script> 



<script type="text/javascript">
var flowersTabs = new YAHOO.widget.TabView("tabbed-nav");
function goTab(i){
flowersTabs.set("activeIndex", i);
}
</script> 


<div id="tabbed-nav" class="yui-navset yui-navset-top">
<ul class="yui-nav">




<li class=" selected" title="active"><noindex><a rel="nofollow" href="#tab1"><em><strong>11111</strong></em></a></noindex></li>
<li class=" " title=""><noindex><a rel="nofollow" href="#tab2"><em><strong>22222</strong></em></a></noindex></li>
<li class=" " title=""><noindex><a rel="nofollow" href="#tab3"><em><strong>33333</strong></em></a></noindex></li>
<div class="yui-content">




<!-- блок 1-->
<div style="display: none; ">
<table class="Head tab-content" id="tb" name="tb" border="0" cellpadding="0" cellspacing="6" width="100%">
<tbody><tr><td valign="top"><blockquote><table class="tcontent" border="0"><tbody><tr><td>
11111111111111111111111111

</td></tr></tbody></table>
</blockquote></td></tr></tbody></table></div>



<!-- блок 2-->
<div style="display: none; ">
<table class="Head tab-content" id="tb" name="tb" border="0" cellpadding="0" cellspacing="6" width="100%">
<tbody><tr><td valign="top"><blockquote><table class="tcontent" border="0"><tbody><tr><td>
2222222222222222222222222

</td></tr></tbody></table>
</blockquote></td></tr></tbody></table></div>





<!-- блок 3-->
<div style="display: none; ">
<table class="Head tab-content" id="tb" name="tb" border="0" cellpadding="0" cellspacing="6" width="100%">
<tbody><tr><td valign="top"><blockquote><table class="tcontent" border="0"><tbody><tr><td>
33333333333333333333333

</td></tr></tbody></table>
</blockquote></td></tr></tbody></table></div>


</div>
</div>
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#6
нафиг-нафиг-нафиг. Когда можно руками на цсс.
Если попробовать посмотреть сайт с кпк скажем, то меню станет неюзабельно. Или там при отключенном js.