Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Include Page
main_menu
main_menu

HTML
<style>

.submenu {
    margin-left: -20px14px; /* Отступ от левого края сайта */
    margin-right: auto;
    margin-top: -149px105px; /* Отступ от верхнего края сайта */
    width: 500px450px; /* длина строки меню*/
    position: fixed;
    z-index: 999;
}
 
</style>
 
<div class="submenu">
<nav class="aui-navgroup aui-navgroup-horizontal">
#nav2, #nav2 ul {
    <div class="aui-navgroup-inner">
   list-style: none outside none;
     <div class="aui-navgroup-primary">margin: 0;
    padding: 0;
}
#nav2 {
      <ul class="aui-nav">
                <li><a href="http://www.teamlead.ru/display/MAIN/submenu_jira">Обзор</a></li>background-color: white; /* Цвет полосы меню - белый*/
    float: left;
    margin-left: 10px;
      <li class="aui-nav-selected"><a href="#">Стоимость</a></li>margin-right: 1%;
    width: 100%; /* длина         <li><a href="#">Документация</a></li>
строки меню*/
    position: relative;
}

#nav2 > li {
         <li><a href="#">Функции</a></li>float: left;
                <li><a href="#">Демо</a></li>text-align: left;
    -moz-transition: all 300ms      </ul>ease-in-out 0s;
    -ms-transition: all 300ms  </div><!ease-in- .aui-navgroup-primary -->out 0s;
    -o-transition: all 300ms  </div><!ease-in- .aui-navgroup-inner -->
</nav><!-- .aui-navgroup -->
</div>
HTML
<div class="aui-tabs horizontal-tabs" id="tabs-example">
    <ul class="tabs-menu">
        <li class="menu-item active-tab">out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all       <a href="#tab-review"><strong>Обзор</strong></a>
        </li>
		<li class="menu-item">
   300ms ease-in-out 0s;
}
#nav2 li a {
    display: block;
    <a href="#tab-cost"><strong>Стоимость</strong></a>
        </li>text-decoration: none;
    -moz-transition: color 450ms  <li class="menu-item">
            <a href="#tab-features"><strong>Функции</strong></a>
        </li>ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color   <li class="menu-item">
            <a href="#tab-demo"><strong>Демо</strong></a>
        </li>
		<li class="menu-item">
            <a href="#tab-clients"><strong>Клиенты</strong></a>
        </li>450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms  <li class="menu-item">
            <a href="#tab-documentation"><strong>Документация</strong></a>
        </li>ease-in-out 0s, background-color 450ms ease-in-out 0s;
    </ul>
    <div class="tabs-pane active-pane" id="tab-review">
        <h2>This is Tab 1</h2>-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms  <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 -->

...

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>