Javascript или Css или Jquerry

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем TimeDontWait, 24 ноя 2010.

  1. TimeDontWait

    TimeDontWait Well-Known Member

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

    vital Больной Компом Детектед

    Регистрация:
    29 янв 2006
    Сообщения:
    2.468
    Симпатии:
    27
    Ну.. Это легко делается на чистом цсс. Загугли Меню на 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
     
  3. European

    Регистрация:
    4 сен 2006
    Сообщения:
    2.580
    Симпатии:
    0
    vital , соглашения о неразглашении уже отменили? :)
     
  4. vital

    vital Больной Компом Детектед

    Регистрация:
    29 янв 2006
    Сообщения:
    2.468
    Симпатии:
    27
    European
    Я ничего не подписывал. И вообще, моя интеллекутальная собсвтенность)
     
  5. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    0
    Вот код:
    Используется Yahoo API
    "YAHOO.widget.TabView"
    Думаю, объяснять не нужно?


    Выглядит ТАК


    Код (Text):
    <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>
     
  6. vital

    vital Больной Компом Детектед

    Регистрация:
    29 янв 2006
    Сообщения:
    2.468
    Симпатии:
    27
    нафиг-нафиг-нафиг. Когда можно руками на цсс.
    Если попробовать посмотреть сайт с кпк скажем, то меню станет неюзабельно. Или там при отключенном js.
     
  7. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    0
    Попросили в аську именно так)
     
  8. TimeDontWait

    TimeDontWait Well-Known Member

    Регистрация:
    4 янв 2010
    Сообщения:
    383
    Симпатии:
    0
    Всем спасибо и +, я не жадный
     
Загрузка...

Поделиться этой страницей