Выпадающее меню кодами цсс

[Kieran]

Дорогие и любимые.
Спасите, пожалуйста, идиота, мой мозг уже сдох.

решено

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

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

Самое обидное, что я это уже делал лет 6 тому назад. Сейчас пытаюсь повторить и НЕ ПОМНЮ.


Великий код от великого Тех.

 * html body{behavior:url("/files/csshover.htc";);}
 * html #wrapper{overflow:visible;}
 body {padding:10px !important; font-family: "Trebuchet MS",Arial,sans-serif!important; font-size:75%!important; color:#333!important; background:#ccc;}
 .postDate, .postTitle {color:#349dcb; font-size:140%!important; font-weight:700!important;}
 A {color:#006DBA!important;}
 #wrapper{ background:#fff; padding:0 !important; width:980px; min-width:980px!important; margin:0 auto !important;overflow:hidden !important;}
 #side {margin:0 !important; padding:0 !important;}
 #side .bordered {width:980px;background:#002e4b; height:91px; margin: 0 !important; padding: 0!important; position:absolute; top:10px;}
 #side li {float:left; display:block; padding-right:10px!important;}
 #side A, #side {color:#fff!important;}
 #extratop {height:130px;}
 #page-c {height:auto; margin:0!important}
 #page-t {margin:0!important}
 .singlePost {height: auto !important; height: 1em; border: 0 !important;}
 #thisDiaryLinks, #globalLinks, #thisDiaryInfo, #thisDiaryOwner, #myDiaryLinks, #lastComments, #pchs, h1 {clear:none; float:left; display:block; width:135px; height:26px; margin:0!important; }
 #thisDiaryLinks ul, #globalLinks ul, #thisDiaryOwner ul, #myDiaryLinks ul, #lastComments ul, #pchs ul{ display:none; width:960px; padding:10px 10px; position:absolute;left:0; top:90px;}
 #lastComments:hover ul, #lastComments ul:hover, #pchs:hover ul, #pchs ul:hover, #globalLinks:hover ul, #globalLinks ul:hover, #thisDiaryOwner:hover ul, #thisDiaryOwner ul:hover #globalLinks:hover ul, #globalLinks ul:hover, #thisDiaryLinks:hover ul, #thisDiaryLinks ul:hover {display:block!important;}
 #myDiaryLinks, #myDiaryLinks ul {display:block;}
 #lastComments ul li {float:left; width:450px!important; margin-right:20px; height:40px; border-bottom: 1px dashed #ddd;}
 #thisDiaryLinks ul {background:#FFAA00;}
 #thisDiaryLinks {background: # #FFAA00 no-repeat;}
 #globalLinks ul {background:#0198AC;}
 #globalLinks {background: # #0198AC no-repeat;}
 #thisDiaryOwner ul {background:#89D51C}
 #thisDiaryOwner {background: # #89D51C no-repeat;}
 #myDiaryLinks ul {background:#e33827;}
 #myDiaryLinks {background: # #e33827 no-repeat;}
 #lastComments ul {background:#AE015C;}
 #lastComments {background: # #AE015C no-repeat;}
 #pchs ul {background:#005286;}
 #pchs {background: # #005286 no-repeat;}
 #thisDiaryPhoto, #paySupportLink, #diarySupportLink, #diarySpiritLink, #myLinksLink, #upInChart, #myProfileLink, #NContent, #login_form, #mainpageLink, #pchs_title, #lastComments_title {display:none !important;}
 #extrabottom {height:5px;width:100%; background:#002e4b; clear:both;}
 #thisDiaryInfo, H1 {font-size:220%!important;margin:0!important; height:45px!important;}
 #thisDiaryInfo { width:350px;text-align:right; padding: 10px 10px 0 0!important; }
 H1 { width:610px;text-align:left!important; padding:10px 0 0 10px!important;}
 .search {width:160px !important;}
 .sign {font-size:80%; color:#666;}
 .header {color:#e33827!important;}
 #TagsList {padding:0 !important; margin:0!important; position:absolute;left:0; top:-55px;}
 #TagsList LI {border-bottom: 1px dashed #ddd; display:block; height:20px; float:left; width:140px!important; margin-right:10px!important;}
 #TagsList LI A {padding:0 !important; }
 .postLinksBackg {display:block !important; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin-top: 10px !important; padding:10px 0 !important;}
 .comments {background: # no-repeat; padding:0 0 0 20px!important;}
 .subscribe {background: # no-repeat; padding:0 0 0 20px!important;}
 .addToQuote {background: # no-repeat; padding:0 0 0 20px!important;}
 .umail, .email {background: # no-repeat; padding:0 0 0 20px!important;}
 .diary {background: # no-repeat; padding:0 0 0 20px!important;}
 .profile {background: # no-repeat; padding:0 0 0 20px!important;}
 .bordered, .menuSection {border: none !important;}
 .text, textarea, #mce_editor_0, #mceSpanFonts {font-family: "Trebuchet MS",Arial,sans-serif!important;border:#ccc 1px solid!important;color:#000!important}
 #JournalComments .singlePost div.authorName, #JournalComments .singlePost div.commentAuthor {display:none;}
 #JournalComments .singlePost div.paragraph {margin:0!important;}
 #codebuttons a {float:left;}
 #codebuttons {clear:both;}
 #mce_editor_0_parent a, #mce_editor_0_parent select {float:left;}

Решено, спасибо еще раз

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

 #authorName { display:block !important; visibility:visible (или overflow:hidden); background: url('/userdir/2/6/6/0/266066/81162917.jpg') 0px 0px no-repeat; position:absolute; left: -25px; top: -315px; width:213px !important; height:300px; line-height: 100% !important; }

А проблема такая: Не блочится ссылка на ник. Картинка становится ссылкой, но сама ссылка никуда не девается.
Что я забыл?!

Решено. Спасибо за просветление!

Маразм крепчал. Напомните пожалуйста, как можно сдвинуть ссылки от верхнего края выпадающего блока меню?
Кодец
#myLinks ul { position:fixed; background:url('/userdir/2/6/6/0/266066/81161476.jpg') no-repeat; left: 1080px; top: 360px; width:182px; height:259px; width-height:100%;}
#myLinks { position: fixed; left: 1100px; top: 380px; width:182px; height:259px; width-height:100%; }
#myLinks a {margin-left:10px; margin-right:100px; padding-top: 20px !important; }
#all_links {display:none !important;}
padding-top, margin-top - не дают эффекта вовсе.
Пробую опустить ссылки ниже самого блока, те к #myLinks a/li прикладываю top: 395px;. Эффекта так же нет.

запись создана: 23.05.2014 в 14:49

@темы: меню

Comments

[Tavi]

Поменять display:block на display:inline или display:inline-block пробовали?

[Kieran]

Tavi, натыкал везде, но результата нет.
И да, inline - типа в переводе в линию. Это не вызывает ли обратный эффект? В линию у меня и так есть, а мне нужно списком.

[polishastik]

Ширину для ul пробовали менять?

[Kieran]

polishastik, Вы гений! Спасибо, осталось причесать. Надеюсь, мне это удастся...
КОД: #thisDiaryLinks ul, #globalLinks ul, #thisDiaryOwner ul, #myDiaryLinks ul, #lastComments ul, #pchs ul { display:none; width:100px; }
Туда нужно будет еще распихать расположение по каждому блоку, а то они один на другом отображаются.

[Tavi]

Kieran, извините, туплю. Поняла так что вам наоборот надо)

[Kieran]

Tavi, Ничего страшного.
Имею дурацкую привычку писать технические посты развязно-бложным стилем. Так что не удивительно, что меня трудно понять.

[Kildor]

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

#authorName { display:block !important; overflow:hidden; background: url('/userdir/2/6/6/0/266066/81162917.jpg') 0px 0px no-repeat; position:absolute; left: -25px; top: -315px; width:213px !important; height:300px; line-height: 100% !important; text-indent:-1050px; }

То есть — ставишь overflow:hidden, и скрываешь текст через отрицательный text-indent.

[Kieran]

Kildor, Аы, меня Гондурас беспокоит... Но могу открыть для вас лично. И тогда замучаю вопросами

Спасибо за идею! Упорото, но действенно. Кстати, с визиблом тоже пашет.

[Kildor]

А вот с этим лучше открыть. Моя телепатия пасует перед тем количеством пикселей, что указано в коде. /\

[Kieran]

Открыль для вас.
Да, это я из крайнего левого в крайний правый угол блок меню гоняю.

P.S. Меню все еще не пашет, думаю его модернезировать в итоге. Простите

[Kildor]

#myLinks ul{
height:239px;
padding-top:20px;
}

Ну или

#myLinks ul{
height:259px;
padding-top:20px;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

А вообще — код адов.

[Kieran]

Kildor, Ну, по честному говоря, его там вообще еще нет.
От этого блока мне нужно фиксированное положение на одном месте враппора. Внезапно выяснил, что оно привязывается к краю страницы, а не краю враппора. И на разных мониторах на разном месте. Что делать - не знаю.

box-sizing:border-box - помогло, спасибо!

[polishastik]

чтобы абсолют/фиксед двигал меню от края раппера надо самому рапперу задать позицию релатив.

[Kildor]

Ставишь необходимому родительскому элементу position: relative, таким образом создавая новый контекст для отсчёта координат.
То бишь — для враппера ставишь position:relative, а нужному блоку — absolute|fixed.

[Kieran]

Kildor, polishastik, Спасибо!

Но с ником ендо дело почему-то не прокатывает. С разных мониторов ник на разном месте.
#authorName { overflow:hidden;background: url('/userdir/2/6/6/0/266066/81162917.jpg') 0px 0px no-repeat; position:absolute; left: -230px; top: -335px; width:213px !important; height:100px; line-height: 100% !important; text-indent:3050px; }
#thisDiaryInfo { position:absolute; }
Но ладно, это решу графически.

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

[polishastik]

Надо сначала загнать элемент в центр, а оттуда маргином в нужное место. Примерно так: left:50%; margin-left:-XXpx;

По поводу вопроса. Сдвинуть можно любой блок выпадающего меню.

[Kieran]

polishastik, Вы меня спасли! Спасибо вам огромное! Теперь мой днев ведет себя прилично и не расползается куда вздумается.
Правда, с андроида чуть-чуть не стыкуются блоки, не знаю, как с этим воевать, но пока это не самая большая головная боль.

Есть еще одна проблема, не понимаю, тупо не понимаю, в чем дело:

Пачиму???? цифра нового коммента ТАМ?
Код блока такой:
{Мой дневник}
#myDiaryLinks ul { display:block !important; visibility:visible !important; position:fixed; background:url('/userdir/2/6/6/0/266066/81161473.jpg') no-repeat; left:50%; margin-left:-593px; top: 360px; width:182px; height:259px; width-height:100%; box-sizing:border-box; padding-top: 15px !important; font-size: 8pt !important;}
#myDiaryLinks a {margin-left:85px; margin-right:8px; }
#myDiaryLinks_title {color:#7a7a7a !important;}
Перечитал весь код раз сто, не понимаю, что я не так делаю.

Открою вам днев тоже, понмаю, что тут одним кусокм кода не обойтись.


И перестал работать код, с помощью которого я менял цвет текста уведомления о новом комментарии - цифирьку нового коммента, короче.
#myDiaryLink a b {font-size: 13px; color: #73c1e1;}
Код срабатывает, но применяет цвет и размер к ссылке "мой дневник", а цифра коммента остается прежнего цвета.

[Kildor]

> Пачиму???? цифра нового коммента ТАМ?
Патаму
Патаму чта эта цифра тожа a, то есть

#myDiaryLinks a { 
margin-left: 85px;
margin-right: 8px;
}

действует и на эту a.

Вообще, у тебя концептуально неправильный подход к стилям. Тебе нужно не изменять отступы у ссылки внутри блока, а изменять поля у этого блока, то есть в итоге получить что-то наподобии:

#myDiaryLinks ul { 
background: url("http://static.diary.ru/userdir/2/6/6/0/266066/81161473.jpg") no-repeat transparent;
box-sizing: border-box;
…
padding-top: 15px !important;
padding-left: 85px; 
padding-rignt: 8px
…
}
#myDiaryLinks a {}

[polishastik]

Счетчик комментов уезжает из-за кода #myDiaryLunks a. Нужно использовать селектор #myDiaryLinks li
Второй вопрос гляну чуть позже с компа.

[Kieran]

Kildor, Вообще, у тебя концептуально неправильный подход к стилям.
Патамушта йа тупойэ.
Не подумал поправить код, когда благодаря вам на меня снизошло озарение в виде box-sizing: border-box;.

Спасибо, теперь все аккуратно.

Но с цветом цифр все таки хочется что-то сделать. Код использую тышшу раз юзаный, но результат совсем не тот =(

[Kieran]

Аеее, я ниче уже не понимаю с этими цифрами.

Поднял свой же пост про эти цифирки.
diarycss.diary.ru/p33653951.htm

Беру код оттуда сверяю с кодом из старого дизайна дневника:

#myDiaryLink a, #menuNewDescussions, #menuNewUmails {font-size: 18px; color: #cc0000; }
#myDiaryLink a b {font-size: 13px; color: #006600;}

Теперь написал себе так.
#myDiaryLink a, #menuNewDescussions, #menuNewUmails {font-size: 9px; color:#6ac4e8!importan; }
#myDiaryLink a b {font-size: 15px; color: #101010!important; font-weight: bold;}
#myFavLink, #myProfileLink, #myNotepadLink, #umailLink, #writeThisDiary { font-weight: bold; }

Что происходит - размер шрифта меняется у цифирак. Цвет не меняется. Ни у кого.
Что-то я опять забыл?

[polishastik]

Попробуйте .count_box a {color:#;}
Вроде правильно помню написание...

П.с. А вообще все это из вращение можно было сделать с меню вверху из стандартных настроек и горааааздо проще)))

[Kieran]

polishastik, Неа, не реагирует аще.

Я в итоге и сделал из стандартных настроек меню вверху. Теховый не захотел, или у меня руки кривые.
Но в этом варианте у меня канула в лету статистика. Она там где-то внизу обиталась, а я скрыл нафиг весь ее блок.
Теперь не знаю, что делать. Без нее грустно...

[polishastik]

Kieran, так скройте отдельные части нижней панели, а статистику оставьте.

[Kieran]

polishastik, Мне весь блок убрать нужно было, потому что он корежит дизайн. Первый пункт, по которому я не хотел юзать стандартные настройки...
Впрочем, статистику внизу мне все равно не интересно. Я подумаю, может ее просто своими ссылками укажу...

[polishastik]

Kieran, так ее можно перенести, куда хочешь. Для всего блока задать абсолют, и не будет корежить диз.

[Kieran]

polishastik, Наверх? А не подскажете код? Я плохо себе представляю, как можно перетаскивать ссылки из блоков через не стационарную величину - я ж не протащу через все свое поле записи вверх...

Хм... не знаю, подумаю. Меня раздражала пустота там, может быть если смогу ее заузить, не будет мешать. Пока не знаю.

[polishastik]

Position:absolute; top:Xpx;
Но надо это для всего блока прописать (bottomNav).

[Kieran]

polishastik, вот собственно величина этой сакральной Хе меня и смущает больше всего. Чаво туда писать? Какую величину?

[polishastik]

Kieran, ну напишите 0 и посмотрите, что будет (элемент будет у верхнего края экрана). Чем больше значение, тем ниже.