Page History

Include Page

	main_menu
	main_menu

HTML

<style>
   
.layer1submenu {
    floatmargin-left: left-14px; /* ОбтеканиеОтступ от полевого правомукрая краюсайта */
    backgroundmargin-right: yellow; /* Цвет фона *auto;
    paddingmargin-top: 0px-105px; /* Отступ Поляот верхнего вокругкрая текстасайта */
    margin-leftwidth: 0px450px; /* Отступдлина справастроки меню*/
    widthposition: 450px; /* Ширина блока */fixed;
    positionz-index: absolute; /* Абсолютное позиционирование */999;
}

#nav2, #nav2 ul {
    toplist-style: 0px;none /* Положение от нижнего края */outside none;
    leftmargin: 27px0;
 /* Положение от правого края */
   }
 
.layer2padding: 0;
}
#nav2 {
    floatbackground-color: rightwhite; /* ОбтеканиеЦвет пополосы правомуменю краю- белый*/
    backgroundfloat: green; /* Цвет фона *left;
    paddingmargin-left: 0px; /* Поля вокруг текста */10px;
    margin-leftright: 0px; /* Отступ справа */1%;
    width: 450px100%; /* Ширинадлина блокастроки меню*/
     position: absoluterelative; /* Абсолютное позиционирование */
}

#nav2 > li {
    topfloat: 0px; /* Положение от нижнего края */left;
    lefttext-align: 27pxleft;
 /* Положение от правого края */
   }
  </style>

<div class="layer1">
<img border="0" height="94px" src="http://www.teamlead.ru/download/attachments/128516734/logoJIRAPNG.png?api=v2">
<p>JIRA is the project tracker for teams planning, building, and launching great products. Thousands of teams choose JIRA to capture and organize issues, assign work, and follow team activity. At their desks, or on the go with the new mobile interface, JIRA helps teams get the job done.</p>
</div>
 
<div class="layer2">
<p>JIRA is the project tracker for teams planning, building, and launching great products. Thousands of teams choose JIRA to capture and organize issues, assign work, and follow team activity. At their desks, or on the go with the new mobile interface, JIRA helps teams get the job done.</p>
</div>

HTML

<div class="aui-tabs horizontal-tabs" id="tabs-example">
    <ul class="tabs-menu">
        <li class="menu-item active-tab">
            <a href="#tab-review"><strong>Обзор</strong></a>
        </li>
		<li class="menu-item">
            <a href="#tab-cost"><strong>Стоимость</strong></a>
        </li>
        <li class="menu-item">
            <a href="#tab-features"><strong>Функции</strong></a>
        </li>
        <li class="menu-item">
            <a href="#tab-demo"><strong>Демо</strong></a>
        </li>
		<li class="menu-item">
            <a href="#tab-clients"><strong>Клиенты</strong></a>
        </li>
        <li class="menu-item">
            <a href="#tab-documentation"><strong>Документация</strong></a>
        </li>
    </ul>
    <div class="tabs-pane active-pane" id="tab-review">
        <h2>This is Tab 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tab-cost">
        <h2>This is Tab 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tab-features">
        <h2>This is Tab 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.</p>
    </div>
    <div class="tabs-pane" id="tab-demo">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
	<div class="tabs-pane" id="tab-clients">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
	<div class="tabs-pane" id="tab-documentation">
        <h2>This is Tab 4</h2>
        <p>Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.</p>
    </div>
</div><!-- // .aui-tabs -->

-moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav2 li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav2 > li > a {
    color: #3b73af;
    display: block;
    font-size: 1.0em; /* Размер шрифта главного меню */
    line-height: 39px;
    padding: 0 10px;
    /* text-transform: uppercase; */
}
#nav2 > li:hover > a, #nav > a:hover {
    background-color: #3b73af; /* фон выделенного элемента подменю */
    color: #FFFFFF;
}
#nav2 li.active > a {
    background-color: #205081; /* Цвет блока меню при клике курсором мыши - голубой */
    color: #FFFFFF;
}

</style>

HTML

<div class="submenu">
	<ul id="nav2">
		<li><a href="http://www.teamlead.ru/pages/viewpage.action?pageId=5898307">Atlassian</a>
		<li><a href="http://www.teamlead.ru/pages/viewpage.action?pageId=130287186">Teamlead</a></li>
		<li><a href="http://www.teamlead.ru/pages/viewpage.action?pageId=130287103">Marketplace</a></li>
	</ul>
	</div>
</div>

...

Page tree

Versions Compared

Old Version 64

New Version Current

Key