CSS help - выравнивание мегаменю - PullRequest
Новая
       11

CSS help - выравнивание мегаменю

2 голосов
/ 20 марта 2012

Я следую этому руководству и пытаюсь изменить его для своего использования: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/...

Если я сделаю раскрывающийся элемент div такой же полной ширины, как горизонтальная строка меню, как мне убедиться, что он выровнен по строке меню?

Я обнаружил, что могу изменить объявление left в следующих правилах CSS, чтобы раскрывающийся список соответствовал строке меню.,

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;  /* <-- change this to left: -150px (or whatever value will get it to align) */
    top:auto;
}

Но для меня это не лучший способ сделать это, так как разные браузеры отображают меню немного по-разному, и поэтому для выравнивания выпадающего меню требуются разные значения.

Что может быть лучше, чтобы раскрывающийся список соответствовал строке меню?Или, может быть, кто-то может указать мне на лучший учебник?

Я скопировал код из учебника в это: http://jsfiddle.net/Pnn6V/. Пожалуйста, не обращайте внимания на небольшие проблемы с jsfiddle, так как это не проблема, которую я 'Я обращаюсь / не то, о чем я спрашиваю.

Ответы [ 2 ]

3 голосов
/ 20 марта 2012

Вы меняете выравнивание меню из учебного пособия, поэтому некоторые настройки CSS также необходимо изменить, чтобы получить желаемый эффект.

Мне бы хотелось, чтобы раскрывающийся элемент div был такой же полной ширины, как и горизонтальная строка меню, и был бы выровнен по строке меню.

В учебнике написано

Чтобы иметь идеальный выпадающий контейнер, нам нужно указать ширину для каждого 

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

Таким образом, вы должны отрегулировать все ширины в соответствии с вашимнужно.

то, что я сделал в вашем css: 

    #menu li .align_right {  
    /* Rounded Corners */  
   /*-moz-border-radius: 5px 0px 5px 5px;  
    -webkit-border-radius: 5px 0px 5px 5px;  
    border-radius: 5px 0px 5px 5px;*/
}  

#menu li:hover .align_right {  
   /* left:auto;
    right:-1px;*/   
    top:auto;  
}

Я удалил правую границу вашего столбца 1, потому что в уроке он имел другое выравнивание (было справа) и то, что вы естьделать с этим 1column, вы кладете это слева, поэтому right border должны быть удалены.это было главной причиной.

см. этот вывод

Существует так много учебных пособий для мега-выпадающего меню, это зависит от ваших потребностей, пожалуйста, посмотрите, если они вам подходят.

И я бы посоветовал вам внимательно прочитать учебник и изменить / изменить css соответственно / противоположно, что избавит вас от многих сомнений / концепций CSS и вскоре вы легко освоите CSS.и этот день не за горами, когда вы будете отвечать на вопросы здесь:)

РЕДАКТИРОВАТЬ:

Согласно вашему комментарию я понял это:

Я сделал следующее:

Я изменил ширину соответственно: 

.dropdown_1column {width: 930px;}  
.dropdown_2columns {width: 931px;}  
.dropdown_3columns {width: 930px;}  
.dropdown_4columns {width: 932px;}  
.dropdown_5columns {width: 932px;}

Ранее левое свойство применялось ко всем столбцам, что было неверно, вы должны применить индивидуальное левое значение в каждом согласно I не 

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}

Надеюсь, это понятно ...

0 голосов
/ 20 марта 2012

Вы можете попробовать добавить сброс CSS на своей странице, чтобы уменьшить несоответствия браузера http://meyerweb.com/eric/tools/css/reset/

...