Дополнительные меню

Тема в разделе "Вопросы по работе с меню", создана пользователем BoRoDKuH, 04.10.2009.

  1. BoRoDKuH
    Offline

    BoRoDKuH Недавно здесь

    Регистрация:
    19.02.2009
    Сообщения:
    16
    Симпатии:
    0
    Пол:
    Мужской
    У меня такая проблема: нужно создать дополнительные меню для каждого подраздела и категории сайта.
    Я их создал - но они отображаются не совсем, так как я хотел.
    Вот как они отображаются[​IMG]
    А вот так выглядит меню othermenu - шаблона[​IMG]
    Как задать и в каких файлах, чтоб мои ново созданные меню отображались как это othermenu (я говорю про стили (чтоб кнопки так выглядели))

    Помогите - очень надо. Я еще нубасик в этих делах.
    PS: шаблон it headline.

    Вот код menus.css
    Код (CODE):
    1. /*----------------------------------------------------------------
    2.   Copyright:
    3.   Copyright (C) 2008 IceTheme. All Rights Reserved
    4.  
    5.   License:
    6.   Copyrighted Commercial Software
    7.  
    8.   Author:
    9.   IceTheme - http://wwww.icetheme.com
    10. ---------------------------------------------------------------- */
    11.  
    12.        
    13. /*---------------
    14.  Main Nav
    15. ----------------*/
    16. #main-nav{
    17.     height:56px;
    18.     margin:0;
    19.     width:970px;
    20.     position:relative;
    21.     overflow:visible;
    22.     clear:both;
    23.     background-repeat:no-repeat;
    24.     background-position:left;}
    25.  
    26.  
    27.     /* main menu ul or ol elment */
    28.     ul#nav{
    29.         display:block;
    30.         position: absolute;
    31.         list-style:none;
    32.         margin:0 0 0 10px;
    33.         z-index:5;
    34.         top:0;
    35.         left:0;
    36.         display:block;}
    37.        
    38.         /* List items in main menu --[for non-javascript users this applies to submenus as well]  */
    39.             ul#nav li {
    40.                 background:url(../images/nav_border.png) no-repeat center right;
    41.                 display:block;
    42.                 list-style:none;
    43.                 position:relative;
    44.                 float:left;}
    45.        
    46.                 ul#nav li a,
    47.                 #MainMenuSub a{
    48.                     text-decoration:none;
    49.                     display:block;
    50.                     padding:5px 20px;}
    51.  
    52.                 /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
    53.                 ul#nav li a{
    54.                     margin:0;
    55.                     float:left;
    56.                     color:#fff;
    57.                     text-decoration:none;
    58.                     display:block;
    59.                     font-size:1.3em;
    60.                     font-family:Georgia, "Times New Roman", Times, serif;
    61.                     padding:0 18px 9px;}
    62.                     ul#nav li a span {
    63.                         padding-top:9px;
    64.                         display:block;}
    65.                         ul#nav li li a span { display:inline; padding-top:0}
    66.                         ul#nav li a span.sub {
    67.                             display:block;
    68.                             font-size:.7em;
    69.                             padding-top:0;
    70.                             font-family:Arial, Helvetica, sans-serif;
    71.                             font-weight:normal;
    72.                             margin-top:3px;
    73.                             color:#86B9DA;
    74.                             letter-spacing:normal}
    75.                             ul#nav li li a span.sub { display:inline; font-size:1em; margin-top:0;}
    76.                                 ul#nav li li a:hover span.sub { color:#fff}
    77.  
    78.  
    79.                 /* All menu links on hover or focus */
    80.                 ul#nav li a:hover, ul#nav li a:focus,
    81.                 #MainMenuSub a:hover, #MainMenuSub a:focus,
    82.                 ul#nav a.mainMenuParentBtnFocused, #MainMenuSub a.subMenuParentBtnFocused{
    83.                     background:url(../images/nav_hover.png) repeat-x bottom ;
    84.                     color:#FFF;}
    85.  
    86.                 /* sub menu links on hover or focus */
    87.                 ul#nav li li a:hover, #nav li a:focus,
    88.                 #MainMenuSub li a:hover, #MainMenuSub  li a:focus,
    89.                 #nav a.mainMenuParentBtnFocused, #MainMenuSub a.subMenuParentBtnFocused{
    90.                     background-image:none;
    91.                     color:#FFF;}
    92.  
    93.  
    94.  
    95. /* ----[ OLs ULs, LIs, and DIVs ]----*/
    96.  
    97. /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
    98. .smOW{
    99.     display:none;
    100.     position: absolute;
    101.     overflow:hidden;
    102.     /*the 2px left & right padding lets you have a 1px border
    103.       on the ul or ol inside since overflow is set to hidden*/
    104.     padding:0 2px;
    105.     margin:0 0 0 -1px;}
    106.  
    107.  
    108. /* All ULs and OLs */
    109. ul#nav ul, ul#nav ol,
    110. #MainMenuSub ul, #MainMenuSub ol {
    111.     padding: 0;
    112.     margin: 0;
    113.     list-style: none;
    114.     line-height: 1em;}
    115.     ul#nav {
    116.         list-style: none;
    117.         line-height: 1em;
    118.         padding:0;}
    119.    
    120.    
    121.  
    122.     /* All submenu OLs and ULs */
    123.     ul#nav ul,
    124.     #MainMenuSub ul {  
    125.         left:0;
    126.         border-right-width:1px;
    127.         border-right-style:solid;}
    128.         ul#nav ul li a,
    129.         #MainMenuSub ul li a {
    130.             padding:0 40px 0 15px;
    131.             height:30px;
    132.             line-height:31px;
    133.             border-bottom-width:1px;
    134.             border-bottom-style:solid;}
    135.    
    136.    
    137.  
    138.     #MainMenuSub li.parent a {
    139.         background:url(../images/nav_drop_arrow.png) no-repeat 96% 55%;}
    140.         #MainMenuSub li.parent a:hover {
    141.             background-image:url(../images/nav_drop_arrow_hover.png) }
    142.        
    143.         #MainMenuSub li:hover {}
    144.        
    145.        
    146.         /* When the parent item is set to current or active */
    147.         ul#nav  li#current a,
    148.         ul#nav  li.active a {
    149.             color:#fff;
    150.             background:url(../images/nav_current.png) no-repeat bottom}
    151.  
    152.             #MainMenuSub li#current a,
    153.             #MainMenuSub li.active a  { color:#fff!important}
    154.  
    155.                    
    156.                    
    157.  
    158. #MainMenuSub { 
    159.     display:block;  
    160.     position:absolute; 
    161.     top:0; 
    162.     left:0;
    163.     width:100%;
    164.     height:0;  
    165.     overflow:visible;  
    166.     z-index:1000000000; }
    167. #MainMenuSub li{ list-style: none;}
    168.                
    169.  
    170.  
    171. /* --------------------------[ The below is just for non-javscript users ]--------------------------*/
    172. #nav li li{ float:none; }
    173.  
    174. #nav li li a{ /* Just submenu links*/  
    175.     position:relative;
    176.     float:none;
    177.     font-size:1em;}
    178.  
    179. #nav li ul { /* second-level lists */
    180.     position: absolute;
    181.     width: 18em;
    182.     margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    183.     margin-top:45px;
    184. }
    185.  
    186. /* third-and-above-level lists */
    187. #nav li ul ul { margin: -1em 0 0 -1000em; }
    188. #nav li:hover ul ul {   margin-left: -1000em; }
    189.  
    190.  /* lists nested under hovered list items */
    191. #nav li:hover ul{   margin-left: 0; }
    192. #nav li li:hover ul {   margin-left: 18em; margin-top:-2.5em;}
    193.  
    194. /* extra positioning rules for limited noscript keyboard accessibility */
    195. #nav li a:focus + ul {  margin-left: 0; margin-top:45px }
    196. #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
    197. #nav li li a:focus {left:0;  margin-left:1000em; width:18em;  margin-top:0;}
    198. #nav li li li a:focus {left:0; margin-left: 2010em; width: 18em;  margin-top:-1em;}
    199. #nav li:hover a:focus{ margin-left: 0; }
    200. #nav li li:hover a:focus + ul { margin-left: 18em; }
    201.  
    202.  
    203. /*===========================///////////////////-===========================
    204.                                   OtherMenu
    205. *===========================///////////////////-==========================*/
    206.  
    207. #othermenu_wrap{
    208.     clear:both;
    209.     padding:0;
    210.     margin-left:-2px;
    211.     position:relative;
    212.     overflow:visible;}
    213.    
    214.     /* main menu ul or ol elment */
    215.     ul#othermenu {
    216.         display:block;
    217.         position: absolute;
    218.         list-style:none;
    219.         margin:0;
    220.         z-index:5;
    221.         top:0;
    222.         left:0;
    223.         display:block;}
    224.        
    225.         /* List items in main menu --[for non-javascript users this applies to submenus as well]  */
    226.         ul#othermenu li {
    227.             display:block;
    228.             list-style:none;
    229.             position:relative;
    230.             float:left;}
    231.            
    232.             #OtherMenuSub{ 
    233.                 display:block;  
    234.                 position:absolute; 
    235.                 top:0; 
    236.                 left:0;
    237.                 width:100%;
    238.                 height:0;  
    239.                 overflow:visible;  
    240.                 z-index:1000000000; }              
    241.                 #OtherMenuSub li{  
    242.                     list-style: none;}
    243.            
    244.                 ul#othermenu li a,
    245.                 #OtherMenuSub a{
    246.                     text-decoration:none;
    247.                     display:block;
    248.                     width:182px;
    249.                     font-size:1em;
    250.                     letter-spacing:0.05em;
    251.                     background: url(../images/othermenu_line.png) no-repeat bottom left;
    252.                     color:#909090;
    253.                     text-transform:uppercase;
    254.                     padding:0 0 0 1px;
    255.                     height:30px;
    256.                     margin-top:-1px;
    257.                     line-height:30px;}                 
    258.                     ul#othermenu li a:hover{
    259.                         color:#333;
    260.                         background-position:bottom left;}
    261.                                
    262.                                 #OtherMenuSub a:hover{ background-image:none}
    263.                        
    264.                     ul#othermenu li#current a,
    265.                     ul#othermenu li.active a,
    266.                     #OtherMenuSub li#current a {
    267.                             color:#333}
    268.                             ul#othermenu  ul li#current a,
    269.                             ul#othermenu ul li.active a,
    270.                             #OtherMenuSub ul li#current a { background-image:none}
    271.                    
    272.                         ul#othermenu li a span{
    273.                             display:block;}
    274.                                
    275.                        
    276.                     /* Just sub menu links */
    277.                                    
    278.                     ul#othermenu li li {
    279.                         width:auto}
    280.                     #OtherMenuSub a,
    281.                     ul#othermenu li li a{
    282.                         text-align:left;
    283.                         text-transform:none;
    284.                         font-size:1em;
    285.                         background-image:none;
    286.                         width:auto;
    287.                         border-bottom:1px solid #E1E1D7;
    288.                         letter-spacing:normal;}
    289.                         ul#othermenu li a:hover,
    290.                         #OtherMenuSub a:hover {
    291.                             color:#333;}
    292.                        
    293.                        
    294.                         #OtherMenuSub a {
    295.                             padding:0 40px 0 20px;}
    296.  
    297.                         /* Parent Main Menu Links ---[javascript users only]*/
    298.                    
    299.                             ul#othermenu  li.parent a span,                
    300.                             #OtherMenuSub li.parent a {
    301.                             background: url(../images/othermenu_arrow_parent.png) 95% 55% no-repeat;}
    302.                                 ul#othermenu  li.parent a:hover span,
    303.                                 #OtherMenuSub li.parent a:hover  {
    304.                                     background-image:url(../images/othermenu_arrow_parent_hover.png) }
    305.                                
    306.                                 ul#othermenu  li.parent li a span,                 
    307.                                 #OtherMenuSub li.parent li a {
    308.                                 background: url(../images/othermenu_arrow_parent_2.png) 95% 55% no-repeat;}
    309.                                     ul#othermenu  li.parent li a:hover span,                   
    310.                                     #OtherMenuSub li.parent li a:hover {
    311.                                         background-image:url(../images/othermenu_arrow_parent_2_hover.png) }
    312.                                
    313.                                    
    314.                        
    315.                            
    316. /* ----[ OLs ULs, LIs, and DIVs ]----*/
    317.  
    318. /* All submenu OLs and ULs */
    319. ul#othermenu ol, ul#othermenu ul, #OtherMenuSub ul, #OtherMenuSub ol { 
    320.     /*border around submenu goes here*/
    321.     border:1px solid #E1E1D7;
    322.     border-bottom:none;
    323.     left:0;
    324.     background:#F6F4F2}
    325.  
    326. /* All ULs and OLs */
    327. ul#othermenu, ul#othermenu ul, ul#othermenu ol, #OtherMenuSub ul, #OtherMenuSub ol {
    328.     padding: 0;
    329.     margin: 0;
    330.     list-style: none;
    331.     line-height: 1em;
    332. }
    333.  
    334.  
    335.  
    336. /* --------------------------[ The below is just for non-javscript users ]--------------------------*/
    337.  
    338. ul#othermenu li li{ float:none; }
    339.  
    340. ul#othermenu li li a{ /* Just submenu links*/  
    341.     position:relative;
    342.     float:none;
    343. }
    344.  
    345. ul#othermenu li ul { /* second-level lists */
    346.     position: absolute;
    347.     width: 10em;
    348.     z-index:999999;
    349.     overflow:visible;
    350.     visibility:visible;
    351.     margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    352. }
    353.  
    354. /* third-and-above-level lists */
    355. ul#othermenu li ul ul { margin: -1em 0 0 -1000em; }
    356. ul#othermenu li:hover ul ul {   margin-left: -1000em; }
    357.  
    358.  /* lists nested under hovered list items */
    359. ul#othermenu li:hover ul{   margin-left: 186px; margin-top:-2.5em;}
    360. ul#othermenu li li:hover ul {   margin-left: 10em; }
    361.  
    362. /* extra positioning rules for limited noscript keyboard accessibility */
    363. ul#othermenu li a:focus + ul {  margin-left: 186px; margin-top:-2.5em; }
    364. ul#othermenu li li a:focus + ul { left:186px; margin-left: 1010em; margin-top:-2.5em;}
    365. ul#othermenu li li a:focus {left:186px;  margin-left:1000em; width:10em;  margin-top:-2.5em;}
    366. ul#othermenu li li li a:focus {left:186px; margin-left: 2010em; width: 10em;  margin-top:-2.5em;}
    367. ul#othermenu li:hover a:focus{ margin-left: 0; }
    368. ul#othermenu li li:hover a:focus + ul { margin-left: 10em; }
    369.                            
    370. /*===========================///////////////////-===========================
    371.                                 Top Menu
    372. ===========================///////////////////-===========================*/
    373. ul#topmenu {
    374.     margin:3px 0 0 6px;
    375.     float:left;}
    376.     ul#topmenu li{
    377.         list-style-type:none;
    378.         display:inline;
    379.         margin:0;
    380.         border-right:1px solid #C7C7C7}
    381.         ul#topmenu li a{
    382.             font-size:1em;
    383.             margin:0 7px;
    384.             font-size:.9em;
    385.             color:#1F648F;}
    386.             ul#topmenu li a:hover{}
    387.                 ul#topmenu li a span {}
    388.                         ul#topmenu li a:hover span {}
    389.  
    390.  
    391. /*===========================///////////////////-===========================
    392.                                 Footer Links
    393. ===========================///////////////////-===========================*/
    394.  
    395. ul#footerlinks {
    396.     float:left;
    397.     width:100%;
    398.     margin:0 auto;
    399.     position:relative;
    400.     overflow:hidden;
    401.     text-align:center;
    402.     padding:0 0 12px;
    403.     margin:0 0 12px;
    404.     border-bottom:1px dashed #B2B2B2}
    405.     ul#footerlinks li{
    406.         list-style-type:none;
    407.         display:inline;
    408.         margin:0 0 0 15px;
    409.         border-right:1px dotted #A6A6A6}
    410.         ul#footerlinks li a{
    411.             margin-right:15px;
    412.             font-size:1em;
    413.             letter-spacing:0.05em;
    414.             text-transform:uppercase;
    415.             color:#888;}
    416.             ul#footerlinks li a:hover{
    417.                 color:#222;
    418.                 text-decoration:none;}
    419.                 ul#footerlinks li#current a { color:#222}
    420.                
    421. /*===========================///////////////////-===========================
    422.                                 Footer Menu
    423. ===========================///////////////////-===========================*/
    424. ul#footermenu {
    425.         float:right;
    426.         margin:0 50px 0 0; }
    427.         ul#footermenu li{
    428.             list-style-type:none;
    429.             float:left;
    430.             margin:0 0 0 10px;}
    431.             ul#footermenu li a{ margin-right:10px;}


    Вот сделал копию и исправил под себя раздел CSS othermenu
    Код (CODE):
    1. /*===========================///////////////////-===========================
    2.                       Слуховые Аппараты
    3. *===========================///////////////////-==========================*/
    4.  
    5. #sluhmenu_wrap{
    6.     clear:both;
    7.     padding:0;
    8.     margin-left:-2px;
    9.     position:relative;
    10.     overflow:visible;}
    11.  
    12.     /* main menu ul or ol elment */
    13.     ul#sluhmenu {
    14.         display:block;
    15.         position: absolute;
    16.         list-style:none;
    17.         margin:0;
    18.         z-index:5;
    19.         top:0;
    20.         left:0;
    21.         display:block;}
    22.  
    23.         /* List items in main menu --[for non-javascript users this applies to submenus as well]  */
    24.         ul#sluhmenu li {
    25.             display:block;
    26.             list-style:none;
    27.             position:relative;
    28.             float:left;}
    29.  
    30.             #SluhMenuSub{
    31.                 display:block;
    32.                 position:absolute;
    33.                 top:0;
    34.                 left:0;
    35.                 width:100%;
    36.                 height:0;
    37.                 overflow:visible;
    38.                 z-index:1000000000; }
    39.                 #SluhMenuSub li{
    40.                     list-style: none;}
    41.  
    42.                 ul#sluhmenu li a,
    43.                 #SluhMenuSub a{
    44.                     text-decoration:none;
    45.                     display:block;
    46.                     width:182px;
    47.                     font-size:1em;
    48.                     letter-spacing:0.05em;
    49.                     background: url(../images/othermenu_line.png) no-repeat bottom left;
    50.                     color:#909090;
    51.                     text-transform:uppercase;
    52.                     padding:0 0 0 1px;
    53.                     height:30px;
    54.                     margin-top:-1px;
    55.                     line-height:30px;}
    56.                     ul#sluhmenu li a:hover{
    57.                         color:#333;
    58.                         background-position:bottom left;}
    59.  
    60.                                 #SluhMenuSub a:hover{ background-image:none}
    61.  
    62.                     ul#sluhmenu li#current a,
    63.                     ul#sluhmenu li.active a,
    64.                     #SluhMenuSub li#current a {
    65.                             color:#333}
    66.                             ul#sluhmenu  ul li#current a,
    67.                             ul#sluhmenu ul li.active a,
    68.                             #SluhMenuSub ul li#current a { background-image:none}
    69.  
    70.                         ul#sluhmenu li a span{
    71.                             display:block;}
    72.  
    73.  
    74.                     /* Just sub menu links */
    75.  
    76.                     ul#sluhmenu li li {
    77.                         width:auto}
    78.                     #SluhMenuSub a,
    79.                     ul#sluhmenu li li a{
    80.                         text-align:left;
    81.                         text-transform:none;
    82.                         font-size:1em;
    83.                         background-image:none;
    84.                         width:auto;
    85.                         border-bottom:1px solid #E1E1D7;
    86.                         letter-spacing:normal;}
    87.                         ul#sluhmenu li a:hover,
    88.                         #SluhMenuSub a:hover {
    89.                             color:#333;}
    90.  
    91.  
    92.                         #SluhMenuSub a {
    93.                             padding:0 40px 0 20px;}
    94.  
    95.                         /* Parent Main Menu Links ---[javascript users only]*/
    96.  
    97.                             ul#sluhmenu  li.parent a span,
    98.                             #SluhMenuSub li.parent a {
    99.                             background: url(../images/othermenu_arrow_parent.png) 95% 55% no-repeat;}
    100.                                 ul#sluhmenu  li.parent a:hover span,
    101.                                 #SluhMenuSub li.parent a:hover  {
    102.                                     background-image:url(../images/othermenu_arrow_parent_hover.png) }
    103.  
    104.                                 ul#sluhmenu  li.parent li a span,
    105.                                 #SluhMenuSub li.parent li a {
    106.                                 background: url(../images/othermenu_arrow_parent_2.png) 95% 55% no-repeat;}
    107.                                     ul#sluhmenu  li.parent li a:hover span,
    108.                                     #SluhMenuSub li.parent li a:hover {
    109.                                         background-image:url(../images/othermenu_arrow_parent_2_hover.png) }
    110.  
    111.  
    112.  
    113.  
    114. /* ----[ OLs ULs, LIs, and DIVs ]----*/
    115.  
    116. /* All submenu OLs and ULs */
    117. ul#sluhmenu ol, ul#sluhmenu ul, #SluhMenuSub ul, #SluhMenuSub ol {
    118.     /*border around submenu goes here*/
    119.     border:1px solid #E1E1D7;
    120.     border-bottom:none;
    121.     left:0;
    122.     background:#F6F4F2}
    123.  
    124. /* All ULs and OLs */
    125. ul#sluhmenu, ul#sluhmenu ul, ul#sluhmenu ol, #SluhMenuSub ul, #SluhMenuSub ol {
    126.     padding: 0;
    127.     margin: 0;
    128.     list-style: none;
    129.     line-height: 1em;
    130. }
    131.  
    132.  
    133.  
    134. /* --------------------------[ The below is just for non-javscript users ]--------------------------*/
    135.  
    136. ul#sluhmenu li li{  float:none; }
    137.  
    138. ul#sluhmenu li li a{ /* Just submenu links*/
    139.     position:relative;
    140.     float:none;
    141. }
    142.  
    143. ul#sluhmenu li ul { /* second-level lists */
    144.     position: absolute;
    145.     width: 10em;
    146.     z-index:999999;
    147.     overflow:visible;
    148.     visibility:visible;
    149.     margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    150. }
    151.  
    152. /* third-and-above-level lists */
    153. ul#sluhmenu li ul ul { margin: -1em 0 0 -1000em; }
    154. ul#sluhmenu li:hover ul ul {    margin-left: -1000em; }
    155.  
    156.  /* lists nested under hovered list items */
    157. ul#sluhmenu li:hover ul{    margin-left: 186px; margin-top:-2.5em;}
    158. ul#sluhmenu li li:hover ul {    margin-left: 10em; }
    159.  
    160. /* extra positioning rules for limited noscript keyboard accessibility */
    161. ul#sluhmenu li a:focus + ul {  margin-left: 186px; margin-top:-2.5em; }
    162. ul#sluhmenu li li a:focus + ul { left:186px; margin-left: 1010em; margin-top:-2.5em;}
    163. ul#sluhmenu li li a:focus {left:186px;  margin-left:1000em; width:10em;  margin-top:-2.5em;}
    164. ul#sluhmenu li li li a:focus {left:186px; margin-left: 2010em; width: 10em;  margin-top:-2.5em;}
    165. ul#sluhmenu li:hover a:focus{ margin-left: 0; }
    166. ul#sluhmenu li li:hover a:focus + ul { margin-left: 10em; }


    Кнопки появились, но расползлись по экрану.
    Как это исправить ?
    [​IMG]
     
    BoRoDKuH, 04.10.2009
    #1

  2. Наши спонсоры

     
< Проблема с подменю | Нижняя часть меню не хочет скругляться >

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

Загрузка...