- 18, May 2024
- #1
Привет, ребята!
Счастливых праздников!
В последнее время я особо не приставал, потому что пытался применить на практике то, чему научился здесь, и, кажется, все идет довольно хорошо, за одним исключением.
. . Я пытаюсь включить центрированное горизонтальное раскрывающееся меню в сайт, и, возможно, я слишком долго возился с этим сайтом, но я не могу понять, что я делаю неправильно, превращая горизонтальное меню в раскрывающееся меню.
Если я пишу его просто для простого меню, оно работает нормально, но когда я пытаюсь сделать его раскрывающимся, у меня возникают проблемы.
В любом случае, если вы взглянете на мой код и сообщите мне, что я делаю неправильно, я буду очень признателен.
Я думаю, что затронутый html выглядит так:
Код (разметка): Код navMenu выглядит так:
Код (разметка): И CSS выглядит так:
Код (разметка): Если это полезно, вы можете просмотреть страницу test.allvixen.com/index.php.
Моя благодарность за вашу помощь в этом.
. .
. . Я пытаюсь включить центрированное горизонтальное раскрывающееся меню в сайт, и, возможно, я слишком долго возился с этим сайтом, но я не могу понять, что я делаю неправильно, превращая горизонтальное меню в раскрывающееся меню.
Если я пишу его просто для простого меню, оно работает нормально, но когда я пытаюсь сделать его раскрывающимся, у меня возникают проблемы.
В любом случае, если вы взглянете на мой код и сообщите мне, что я делаю неправильно, я буду очень признателен.
Я думаю, что затронутый html выглядит так:
#navMenuCheck {
position:absolute;
left:-999em;
}
#navMenu {
width: 1265px;
position: relative;
margin: 3.9em 0 0 2em;
padding: 2.5em 0 0.75em 0.75em;
height: 0.1em;
text-align: center;
background: #65656B;
}
#navMenu li {
list-style:none;
display:inline-block;
width: 12em;
margin-top: -3em;
}
#navMenu a {
display: inline-block;
vertical-align: bottom;
text-decoration: none;
font-size: 1.25em;
color: #38E7F0;
padding: 0 0.5em 0 0.5em;
line-height: 3em;
}
#navMenu a.current {
color:#AEF;
}
#navMenu a:active,
#navMenu a:focus,
#navMenu a:hover {
width: 90%;
color:#FFF;
font-weight: bold;
}
#navMenu a:after {
display:inline-block;
padding:0 0.1em 0 0.5em;
color:#FFF;
}
#navMenu .lastInSet a:after {
display:none;
}
#navMenu .setBreak {
padding-right:8em;
}
#navMenu a:after,
#navMenu:after,
#navMenu ul:before,
#navMenu ul:after {
color: #FFF;
font-family: arial,helvetica,sans-serif;
}
#navMenu:after,
#navMenu ul:before,
#navMenu ul:after {
position:absolute;
left:50%;
width:3em;
bottom:0.65em;
}
#navMenu:after {
bottom:0.2em;
font-size:150%;
margin-left:-1.5em;
}
#navMenu ul:before {
margin-left:-3em;
}
Код (разметка): Код navMenu выглядит так:
<input type="checkbox" id="navMenuCheck"> <label for="navMenuCheck"></label> <div id="navMenu"> <ul> <li> <a href="/">Home</a> </li><li> <a href="/">All Categories</a> <ul> <li> <a href="#">Electronics</a> </li><li> <a href="#">Computers & Networking</a> </li><li> <a href="#">Flashlights & Lamps</a> </li><li> <a href="#">Cell Phones & Accessories</a> </li><li> <a href="#">Automotive</a> </li> </ul> </li><li> <a href="/">New Arrivals</a> </li><li> <a href="/">Top Sellers</a> </li><li> <a href="/">Clearance</a> </li><li> <a href="/">Steals & Deals</a> </li><li> <a href="/">Contact Us</a> </li> </ul> <!-- end navMenu --></div> Код (разметка): И CSS выглядит так:
<div class="heightWrapper"> <?php include("navMenu.php"); ?> <div id="contentWrapper"> <div id="products"> Код (разметка): Если это полезно, вы можете просмотреть страницу test.allvixen.com/index.php.
Моя благодарность за вашу помощь в этом.
. .
![[lynda.com] - Создание Интерактивного Pdf-журнала (rus)](/assets/images/icons/forum6.png){kind=icon}
