На форуме InfoScript.ru вы можете: задать вопросы по php, вопросы по javascript, вопросы по системе uCoz, заказать графику для вашего сайта и просто пообщаться с хорошими людьми
  • Страница 1 из 1
  • 1
Модератор форума: frenkmalcov  
Форум вебмастера » Основной раздел » Вопросы по системе uCoz » горизонтальное меню (активный раздел)
горизонтальное меню
salabaikin Дата: Пятница, 20.07.2012, 14:44 | Сообщение # 1
Offline
Опытный
Пользователи
Сообщений:117
Награды:0
Замечания:0%
Репутация
0
Как сделать так, чтобы при переходе к новостям (статьи, блог и т.д) в меню этот раздел был активным ..то есть .. после нажатия на кнопку новости (на меню) эта кнопка после перехода стала например подчеркнутой или что то еще .. блин, думаю вы меня поняли, просто я не могу это по другому объяснить.

Вот скрин

Добавлено (20.07.2012, 14:44)
---------------------------------------------
как сделать так ?


http://vk.com/arsenal_club
 
Arhim Дата: Пятница, 20.07.2012, 15:15 | Сообщение # 2
Offline
Продвинутый
Пользователи
Сообщений:151
Награды:0
Замечания:0%
Репутация
9
Code
#menu li a { пассивная кнопка }
#menu li a:hover, #menu li.active a { активная кнопка }


вместо слов в скобках желаемые стили

Если не поймёшь закинь css меню сюда.


Сообщение отредактировал Arhim - Пятница, 20.07.2012, 15:16
 
salabaikin Дата: Пятница, 20.07.2012, 18:02 | Сообщение # 3
Offline
Опытный
Пользователи
Сообщений:117
Награды:0
Замечания:0%
Репутация
0
Arhim, окау спасибо )) я вас понял .. если что то не получится я отпишусь ))

Добавлено (20.07.2012, 18:02)
---------------------------------------------
Arhim, нее все таки не получилось .. вот сам код

Code

/*  
  design: FcArsenal-Club
*/

/** navigation **/

#mainnav-topshadow {
  background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-topshadow.png);
  background-repeat:repeat-x;
  background-position:bottom;
  height:8px;
  width:972px;
  margin:1px 0px 0px 2px;

  padding:0;
}

#mainnav-bottomshadow {
  background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-bottomshadow.png);
  background-repeat:repeat-x;
  background-position:top;
  height:7px;
  width:972px;
  margin:0px 0px 2px 2px;
  padding:0;

}

#mainnav {  
  background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-background2.png);
  background-repeat:repeat;
  background-position:top;
  width:972px;
  margin:0 0 1px 2px;
  padding:0;
  position:relative;
  z-index:100;

}

#mainnav ul {
  margin:0 0 0 -1px;
  padding:0;
  float:left;
}

#mainnav ul li {
  float:left;
  margin:0 auto;
  padding:0 0 0 0;
  list-style-type:none;
  border-left:1px solid #ffffff;
}

#mainnav ul li a {
  background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-background.png);
  background-repeat:repeat-x;
  background-position:top;
  background-color:#dedede;
  float:left;
  border-top:2px solid #cccccc;
  padding:4px 12px 4px 12px;
  margin:0;
  text-transform:uppercase;
  color:#000000;
  font-size:1em;
}

#mainnav ul li a.active {
  border-top:2px solid #db0007;
}

#mainnav ul li a.last3 {
  padding-left:10px;
}

#mainnav ul li a.last4 {
  padding-left:13px;
}

#mainnav ul li a:hover {
  border-top:2px solid #db0007;
  color:#000000;
  text-decoration:none;
}

#mainnav ul li ul li {
  border:1px solid #cccccc;
  background-color:#f2f2f2;
  display:inline;
  margin:-1px 0 0 -1px;
  background-image:url(http://www.arsenal.com/assets/images/nav/dropdown.gif);
  background-repeat:no-repeat;
  background-position:left;
  padding:0 0 0 4px;
  position:relative;
  z-index:20;
}

#mainnav ul li ul li.first {
  border-top:none;
}

#mainnav ul li ul li a {
  background-color:transparent;
  background-image:none;
  float:none;
  border:0;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  border-right:1px solid #fff;
  padding:1px 8px 2px 9px;
  margin-left:-4px;
  text-transform:none;
  color:#000000;
  font-size:1.1em;
  width:129px;
  display:block;
}

#mainnav ul li ul li a.drop {
  background-image:url(http://www.arsenal.com/assets/images/nav/bullet9px.gif);
  background-repeat:no-repeat;
  background-position:right;
  border-top:1px solid #fff;
}

#mainnav ul li ul li a:hover {
  color:#aa0000;
  text-decoration:none;
  border-top:1px solid #fff;
}

/** left nav **/

#leftnav ul {
  margin:0;
  padding:0 0 20px 0;
  background-color:#ffffff;
  background-image:url(http://www.arsenal.com/assets/images/nav/leftnav-adverttop.jpg);
  background-repeat:no-repeat;
  background-position:bottom left;
}

#leftnav ul li {
  width:130px;
  margin:0;
  padding:0;
  list-style-type:none;
  background-image:url(http://www.arsenal.com/assets/images/nav/leftnavbk.jpg);
  background-repeat:no-repeat;
  background-position:left top;
}

#leftnav ul li a {
  display:block;
  width:110px;
  height:auto;
  padding:6px 0 5px 20px;
  margin:0px 0 0 0;
   
  color:#666666;
  font-size:1.1em;
  font-weight:bold;
   
   
}

#leftnav ul li a.active {
  color:#aa0000;
}
   
#leftnav ul li a:hover {
  color:#ba3030;
  text-decoration:none;
}

/* drop down */

/* Get rid of the margin, padding and bullets in the unordered lists */
#dropnav, #dropnav ul {
  position:relative;
  z-index:10;
}

/* Set up the link size, color and borders */
#dropnav a, #dropnav a:visited {
  display:block;  
  text-decoration:none;
}

/* For Non-IE browsers and IE7 */
#dropnav li:hover {
  position:relative;
}

/* Make the hovered list color persist */
#dropnav li:hover > a {
  border-top:2px solid #db0007;
}

#dropnav li li:hover > a {
  border-top:1px solid #fff;
  color:#db0007;
}

/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#dropnav li ul {
  display:none;
}

/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#dropnav li:hover > ul {
  display:block;  
  position:absolute;  
  top:0px;
  left:119px;  
  padding:0 30px 30px 30px;  
  margin:14px 0 0 -1px;
}

#dropnav li:hover > ul ul {
  margin-top:0;
}

/* Position the first sub level beneath the top level liinks */
#dropnav > li:hover > ul {
  left:-30px;  
  top:10px;
}

/* get rid of the table */
#dropnav table {
  position:absolute;  
  border-collapse:collapse;  
  top:0;  
  left:0;  
  z-index:100;  
  font-size:1em;
}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #dropnav li a:hover {
  position:relative;  
}

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */

* html #dropnav li ul {
  visibility:hidden;  
  display:block;  
  position:absolute;  
}

/* keep the third level+ hidden when you hover on first level link */
#dropnav li a:hover ul ul{
  visibility:hidden;
}

/* keep the fourth level+ hidden when you hover on second level link */
#dropnav li a:hover ul a:hover ul ul{
  visibility:hidden;
}

/* keep the fifth level hidden when you hover on third level link */
#dropnav li a:hover ul a:hover ul a:hover ul ul{
  visibility:hidden;
}

/* keep the sixth level hidden when you hover on fourth level link */
#dropnav li a:hover ul a:hover ul a:hover ul a:hover ul ul {
  visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#dropnav li a:hover ul {
  visibility:visible;  
  left:0px;  
  top:17px;  
  lef\t:0px;  
  to\p:17px;
  padding-top:5px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#dropnav li a:hover ul a:hover ul {  
  visibility:visible;  
  top:-6px;  
  left:149px;
}

/* make the fourth level visible when you hover over third level link */
#dropnav li a:hover ul a:hover ul a:hover ul {  
  visibility:visible;
}

/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {  
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {  
visibility:visible;
}

@media screen and (-webkit-min-device-pixel-ratio:0){
#mainnav ul li a {
  background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-background.png);
  background-repeat:repeat-x;
  background-position:top;
  background-color:#dedede;
  float:left;
  border-top:2px solid #cccccc;
  padding:5px 12px 5px 12px !important;
  margin:0;
  text-transform:uppercase;
  color:#000000;
  font-size:1em;
}

}


http://vk.com/arsenal_club
 
Arhim Дата: Пятница, 20.07.2012, 20:56 | Сообщение # 4
Offline
Продвинутый
Пользователи
Сообщений:151
Награды:0
Замечания:0%
Репутация
9
Попробуй заменить на этот:
Code
/*    
    design: FcArsenal-Club   
   */   

   /** navigation **/   

   #mainnav-topshadow {   
    background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-topshadow.png);   
    background-repeat:repeat-x;   
    background-position:bottom;   
    height:8px;   
    width:972px;   
    margin:1px 0px 0px 2px;   

    padding:0;   
   }   

   #mainnav-bottomshadow {   
    background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-bottomshadow.png);   
    background-repeat:repeat-x;   
    background-position:top;   
    height:7px;   
    width:972px;   
    margin:0px 0px 2px 2px;   
    padding:0;   

   }   

   #mainnav {    
    background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-background2.png);   
    background-repeat:repeat;   
    background-position:top;   
    width:972px;   
    margin:0 0 1px 2px;   
    padding:0;   
    position:relative;   
    z-index:100;   

   }   

   #mainnav ul {   
    margin:0 0 0 -1px;   
    padding:0;   
    float:left;   
   }   

   #mainnav ul li {   
    float:left;   
    margin:0 auto;   
    padding:0 0 0 0;   
    list-style-type:none;   
    border-left:1px solid #ffffff;   
   }   

   #mainnav ul li a {   
    background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-background.png);   
    background-repeat:repeat-x;   
    background-position:top;   
    background-color:#dedede;   
    float:left;   
    border-top:2px solid #cccccc;   
    padding:4px 12px 4px 12px;   
    margin:0;   
    text-transform:uppercase;   
    color:#000000;   
    font-size:1em;   
   }   

   #mainnav ul li a.active {   
    border-top:2px solid #db0007;   
   }   

   #mainnav ul li a.last3 {   
    padding-left:10px;   
   }   

   #mainnav ul li a.last4 {   
    padding-left:13px;   
   }   

   #mainnav ul li a:hover {   
    border-top:2px solid #db0007;   
    color:#000000;   
    text-decoration:none;   
   }   

   #mainnav ul li ul li {   
    border:1px solid #cccccc;   
    background-color:#f2f2f2;   
    display:inline;   
    margin:-1px 0 0 -1px;   
    background-image:url(http://www.arsenal.com/assets/images/nav/dropdown.gif);   
    background-repeat:no-repeat;   
    background-position:left;   
    padding:0 0 0 4px;   
    position:relative;   
    z-index:20;   
   }   

   #mainnav ul li ul li.first {   
    border-top:none;   
   }   

   #mainnav ul li ul li a {   
    background-color:transparent;   
    background-image:none;   
    float:none;   
    border:0;   
    border-top:1px solid #fff;   
    border-bottom:1px solid #fff;   
    border-right:1px solid #fff;   
    padding:1px 8px 2px 9px;   
    margin-left:-4px;   
    text-transform:none;   
    color:#000000;   
    font-size:1.1em;   
    width:129px;   
    display:block;   
   }   

   #mainnav ul li ul li a.drop {   
    background-image:url(http://www.arsenal.com/assets/images/nav/bullet9px.gif);   
    background-repeat:no-repeat;   
    background-position:right;   
    border-top:1px solid #fff;   
   }   

   #mainnav ul li ul li a:hover {   
    color:#aa0000;   
    text-decoration:none;   
    border-top:1px solid #fff;   
   }   

   /** left nav **/   

   #leftnav ul {   
    margin:0;   
    padding:0 0 20px 0;   
    background-color:#ffffff;   
    background-image:url(http://www.arsenal.com/assets/images/nav/leftnav-adverttop.jpg);   
    background-repeat:no-repeat;   
    background-position:bottom left;   
   }   

   #leftnav ul li {   
    width:130px;   
    margin:0;   
    padding:0;   
    list-style-type:none;   
    background-image:url(http://www.arsenal.com/assets/images/nav/leftnavbk.jpg);   
    background-repeat:no-repeat;   
    background-position:left top;   
   }   

   #leftnav ul li a {   
    display:block;   
    width:110px;   
    height:auto;   
    padding:6px 0 5px 20px;   
    margin:0px 0 0 0;   
       
    color:#666666;   
    font-size:1.1em;   
    font-weight:bold;   
       
       
   }   

   #leftnav ul li a.active {   
    color:#aa0000;   
   }   
       
   #leftnav ul li a:hover, #leftnav ul li a.active{   
    color:#ba3030;   
    text-decoration:none;   
   }   

   /* drop down */   

   /* Get rid of the margin, padding and bullets in the unordered lists */   
   #dropnav, #dropnav ul {   
    position:relative;   
    z-index:10;   
   }   

   /* Set up the link size, color and borders */   
   #dropnav a, #dropnav a:visited {   
    display:block;    
    text-decoration:none;   
   }   

   /* For Non-IE browsers and IE7 */   
   #dropnav li:hover {   
    position:relative;   
   }   

   /* Make the hovered list color persist */   
   #dropnav li:hover > a {   
    border-top:2px solid #db0007;   
   }   

   #dropnav li li:hover > a {   
    border-top:1px solid #fff;   
    color:#db0007;   
   }   

   /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */   
   #dropnav li ul {   
    display:none;   
   }   

   /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */   
   #dropnav li:hover > ul {   
    display:block;    
    position:absolute;    
    top:0px;   
    left:119px;    
    padding:0 30px 30px 30px;    
    margin:14px 0 0 -1px;   
   }   

   #dropnav li:hover > ul ul {   
    margin-top:0;   
   }   

   /* Position the first sub level beneath the top level liinks */   
   #dropnav > li:hover > ul {   
    left:-30px;    
    top:10px;   
   }   

   /* get rid of the table */   
   #dropnav table {   
    position:absolute;    
    border-collapse:collapse;    
    top:0;    
    left:0;    
    z-index:100;    
    font-size:1em;   
   }   

   /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */   
   * html #dropnav li a:hover {   
    position:relative;    
   }   

   /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */   

   /* change the drop down levels from display:none; to visibility:hidden; */   

   * html #dropnav li ul {   
    visibility:hidden;    
    display:block;    
    position:absolute;    
   }   

   /* keep the third level+ hidden when you hover on first level link */   
   #dropnav li a:hover ul ul{   
    visibility:hidden;   
   }   

   /* keep the fourth level+ hidden when you hover on second level link */   
   #dropnav li a:hover ul a:hover ul ul{   
    visibility:hidden;   
   }   

   /* keep the fifth level hidden when you hover on third level link */   
   #dropnav li a:hover ul a:hover ul a:hover ul ul{   
    visibility:hidden;   
   }   

   /* keep the sixth level hidden when you hover on fourth level link */   
   #dropnav li a:hover ul a:hover ul a:hover ul a:hover ul ul {   
    visibility:hidden;   
   }   

   /* make the second level visible when hover on first level link and position it */   
   #dropnav li a:hover ul {   
    visibility:visible;    
    left:0px;    
    top:17px;    
    lef\t:0px;    
    to\p:17px;   
    padding-top:5px;   
   }   

   /* make the third level visible when you hover over second level link and position it and all further levels */   
   #dropnav li a:hover ul a:hover ul {    
    visibility:visible;    
    top:-6px;    
    left:149px;   
   }   

   /* make the fourth level visible when you hover over third level link */   
   #dropnav li a:hover ul a:hover ul a:hover ul {    
    visibility:visible;   
   }   

   /* make the fifth level visible when you hover over fourth level link */   
   #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {    
   visibility:visible;   
   }   
   /* make the sixth level visible when you hover over fifth level link */   
   #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {    
   visibility:visible;   
   }   

   @media screen and (-webkit-min-device-pixel-ratio:0){   
   #mainnav ul li a {   
    background-image:url(http://www.arsenal.com/assets/images/nav/mainnav-background.png);   
    background-repeat:repeat-x;   
    background-position:top;   
    background-color:#dedede;   
    float:left;   
    border-top:2px solid #cccccc;   
    padding:5px 12px 5px 12px !important;   
    margin:0;   
    text-transform:uppercase;   
    color:#000000;   
    font-size:1em;   
   }   

   }


Сообщение отредактировал Arhim - Пятница, 20.07.2012, 20:59
 
salabaikin Дата: Суббота, 21.07.2012, 11:30 | Сообщение # 5
Offline
Опытный
Пользователи
Сообщений:117
Награды:0
Замечания:0%
Репутация
0
Arhim, не помогло =((

Добавлено (21.07.2012, 11:30)
---------------------------------------------
может в самом коде надо что то прописать ? КОГДА СТАВЛЮ ЭТО - class="active", то что нужно .. но она на другие автоматически не ставится


http://vk.com/arsenal_club
 
Форум вебмастера » Основной раздел » Вопросы по системе uCoz » горизонтальное меню (активный раздел)
  • Страница 1 из 1
  • 1
Поиск: