Снова нужна помощь. . . Над моей головой

[ewdokimow1]

Мужчина! Ненавижу делать это снова, но я в замешательстве и нуждаюсь в помощи.

У меня проблема с навигационным меню. Я пытаюсь добавить его туда, где у меня может быть раскрывающееся меню в разделе моих категорий, и я просто не могу понять, как заставить его работать. Я попробовал несколько руководств и примеров, но ничего не усваивается. По сути, я думаю, что только что испортил все меню. Когда я пытаюсь изменить размер страницы, меню просто исчезает, когда оно достигает размера телефона, и я теряю рассудок.

Я думаю, что где-то по пути я испортил @Media для меню, и понятия не имею, как получить раскрывающийся список «категорий».

HTML — это:

<label for="mainMenuCheck"></label> <ul> <li><a href="/index.php" class="current">Home</a></li> <li><a href="/shipping.php">Shipping</a></li> <li><a href="/returns.php">Returns</a></li> <li><a href="/back_orders.php">Back Orders</a></li> <li><a href="/privacy.php">Privacy Policy</a></li> <li><a href="/contact.php">Contact Us</a></li> <li><a href="/fixed_blades.php">Categories: Fixed Blades</a></li> <li><a href="/fantasy_knives.php">Fantasy Knives</a></li> </ul>

Код (разметка): и мой CSS выглядит так:
html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) { html { font-size:200%; } } body { background:#BFCDE4; } #contentWrapper { max-width: 72em; margin: 0 auto; overflow:hidden; background: #FFF; -webkit-box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #321; box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #321; -webkit-border-radius: 1em; border-radius: 1em; } * html #contentWrapper { width:55em; } h1 { padding-left: 2em; font-size: 100%; background: #0067A9; -webkit-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; } h1 a { position: relative; display: block; padding: 40px 0; text-decoration: none; font: bold 40px/44px arial,helvetica,sans-serif; color: #FFF; } h1 span { position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: #0067A9 url(/images/header.jpg) center left no-repeat; } h1 small { display:block; font:bold 48%/120% arial,helvetica,sans-serif; } #mainMenu { background: #DDEEFF; border-top: 2px solid #000; border-bottom: 2px solid #000; } #mainMenu ul { list-style: none; padding-top: 0.5em; text-align: center; } #mainMenu li { display: inline; vertical-align: bottom; } #mainMenu a { display: inline-block; vertical-align: bottom; margin-bottom: 0.25em; padding: 0.5em 1em; text-decoration:none; font: bold 95%/95% arial,helvetica,sans-serif; color: #000; } #mainMenu a:hover { color: #990000; text-shadow: 0 0 2px #C60; } #shipping-bar { margin: 2em 0 1em 0; background: #FFF; } #shipping-bar p { padding: 0.4em 0 0.4em 0; text-align: center; font-size: 1.75em; text-decoration: none; font-weight: bold; color: #CC0000; } h2 { text-transform: uppercase; font-size: 1.5em; text-decoration: underline; margin-bottom: -0.5em; padding: 1.65em 0 1em 1em; } #products { float: left; overflow: hidden; width: 100%; padding: 1em 1.5em 0 0; background: #FFF; } #products ul { list-style: none; text-align: center; padding-bottom: 1em; } #products li { padding-left: 1em; display:inline; vertical-align:top; } #products a { width:231px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #products a:hover { background:#BFCDE4; } #products img { display: block; margin: 0px auto; width: 100%; } h3 { font-size: 1.1em; font-weight: bold; color: #0067A9; padding-bottom: 1em; } .retail-price { margin-top: 1em; font-size: 1em; color: #666; } .price { font-size: 1.35em; font-weight: bold; color: #CC0000; } #description { clear:both; margin: 1.5em 0.5em 1.5em 0; padding: 2em 1em 1em 1.5em; } #footer { text-align:center; padding:1em; height: 2em; background: #0067A9; } #footer p { color:#FFF; } #footer span { margin-right: 40px; } @media (max-width:50em) { body { min-width:192px; } #contentWrapper, #sidebar { float:none; width:auto; } #content, #sidebar { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } #products { padding:1em 0 0; margin:0 0.5em; } #products a { padding:0.5em; } } @media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 146%/45% arial,helvetica,sans-serif; line-height: 125%; } h1 span { display:none; } } @media (max-width:340px) { #products a { width:auto; margin:0 auto; -webkit-box-sizing:padding-box; box-sizing:padding-box; } } @media (max-width:52em) { #mainMenu ul { max-width:40em; padding-top:0.5em; margin:0 auto; } } @media (max-width:42em) { h1 { text-align:left; padding-left:0.25em; font-size:100%; } #mainMenuCheck + label { display:block; float:right; margin:-5.5em 0.5em 0 0; padding:0.5em; background:#420; border:0.25em solid #FFF; -webkit-border-radius:0.5em; border-radius:0.5em; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select: none; } #mainMenuCheck + label:before, #mainMenuCheck + label:after { display:block; content:""; width:2em; height:0.5em; border:solid #FFF; border-width:0.25em 0; } #mainMenuCheck + label:after { border-top:0; } #mainMenuCheck:checked + label { background:#840; } #mainMenuCheck + label:hover { background:#C40; } #mainMenu ul { display:none; overflow:hidden; } #mainMenuCheck:checked ~ ul { display:block; } #contentWrapper, #content, #extras { float:none; width:auto; margin:0; } #content, #extras { padding:1em 0.5em 0; } #extras .subsection { padding-top:1em; border-top:2px solid #A98; } #extras .subsection li { padding:0.5em 0; } } @media (max-width:28em) { h1 { font-size:180%; } #mainMenuCheck + label { font-size:75%; margin:-5em 0.5em 0 0; } #content .leadingPlate, #content .trailingPlate { float:none; max-width:100%; margin:0 auto 1em; } }
Код (разметка): и я думаю, вам также может понадобиться мой код mainMenu.php:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1"> <meta title="Уникальный коллекционный ассортимент ножей, лезвий и других вкусностей для тех, кто хочет чего-то необычного"> <meta name="description" content="Растущая коллекция уникальных ножей, клинков и других вкусностей для тех, у кого есть все."> <link rel="stylesheet" href="screen3.css" media="screen,projection,tv"> <title>Unique, Collectable Assortment of Knives, Blades and Other Goodies For Those Who Want Something Different | SharpStuff4Guys.com</title> <link rel="shortcut icon" href="favicon.png"> </head> <html> <body> <div id="contentWrapper"> <h1> <a href="/index.php"> SharpStuff4Guys <span><!-- image sandbag --></span> <small>Unique, Collectible Knives, Blades & More</small> </a> </h1> <div id="mainMenu"> <?php include("mainMenu.php"); ?> <!-- #mainMenu --></div> <div id="shipping-bar"> <?php include("ship-bar.php"); ?> </div> <div id="products"> <h2>featured products</h2> <ul> <li> <a href="/copper_spring_assist_knife.php"> <img src="/images/copper_spring_assist_knife.jpg" alt="Нож с медной пружиной" /> <h3> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </h3> <span class="retail-price"> Retail Price: $26.49 </span><br> <span class="price"> Your Price $21.45 </span> </a> </li><li> <a href="/baseball_style_vietnam_veteran_cap.php"> <img src="/images/vietnam_cap-1.jpg" alt="кепка ветерана Вьетнама" /> <h3> Vietnam Veteran Cap w/ Adjustable Back </h3> <span class="retail-price"> Retail Price: $19.99 </span><br> <span class="price"> Your Price: $ 8.00 </span> </a> </li><li> <a href="/death_stalker_fantasy_knife.php"> <img src="/images/death_stalker.jpg" alt="сталкер смерти фэнтези нож" /> <h3> "Death Stalker" Fantasy Knife w/ Display Stand </h3> <span class="retail-price"> Retail Price: $78.49 </span><br> <span class="price"> Your Price $59.73 </span> </a> </li><li> <a href="/biohazard_zombie_hack_n_slash.php"> <img src="/images/zombie_hack_set.jpg" alt="Биологически опасный зомби"Hack 'n' Slash" 4 Pc Set" /> <h3> Biohazard Zombie "Hack 'n' Slash" 4 Pc Set </h3> <span class="retail-price"> Retail Price: $109.99 </span><br> <span class="price"> Your Price $62.52 </span> </a> </li> </ul> <h2>new arrivals</h2> <ul> <li> <a href="/guthook_fixed_blade_knife.php"> <img src="/images/guthook_knife.jpg" alt="Нож с фиксированным лезвием и рукояткой-крючком, 7 дюймов" /> <h3> 7" Fingergrip Guthook Fixed Blade Knife </h3> <span class="retail-price"> Retail Price: $15.99 </span><br> <span class="price"> Your Price $6.46 </span> </a> </li><li> <a href="/damascus_wedge_knife.php"> <img src="/images/damascus_wedge.jpg" alt="8-дюймовый дамасский клин с РУЧКОЙ ИЗ ОЛИВКОВОГО ДЕРЕВА/РОГА" /> <h3> 8" Damascus Wedge with Olive Wood/Horn Handle </h3> <span class="retail-price"> Retail Price: $61.99 </span><br> <span class="price"> Your Price $48.48 </span> </a> </li><li> <a href="/american_flag_knuckle_belt_buckle.php"> <img src="/images/american_flag_knuckle_belt_buckle.jpg" alt="american_flag_knuckle_belt_buckle" /> <h3> Patriotic American Flag Knuckle Belt Buckle </h3> <span class="retail-price"> Retail Price: $15.99 </span><br> <span class="price"> Your Price $12.06 </span> </a> </li><li> <a href="/boker_arbolito_soul.php"> <img src="/images/boker_arbolito_soul.jpg" alt="Нож Boker Arbolito Soul II Buffalo с фиксированным лезвием" /> <h3> Boker Arbolito Soul II Buffalo Fixed Blade Knife </h3> <span class="retail-price"> Retail Price: $249.00 </span><br> <span class="price"> Your Price $146.34 </span> </a> </li> </ul> <h2>best sellers</h2> <ul> <li> <a href="/scorpion_handle_fantasy_bowie_knife.php"> <img src="/images/fantasy_bowie_knife.jpg" alt="Нож Боуи с ручкой скорпиона в стиле фэнтези" /> <h3> Scorpion Handle Fantasy Bowie Knife w/Sheath </h3><br> <span class="retail-price"> Retail Price: $21.49 </span><br> <span class="price"> Your Price $16.37 </span> </a> </li><li> <a href="/jolt_mini_stun_gun.php"> <img src="/images/jolt_mini_stun_gun.jpg" alt="Мини-электрошокер JOLT 35,000,000* - черный" /> <h3> JOLT 35,000,000* Mini Stun Gun - Black </h3><br> <span class="retail-price"> Retail Price: $26.49 </span><br> <span class="price"> Your Price $21.83 </span> </a> </li><li> <a href="/vietnam_commemorative_knife.php"> <img src="/images/vietnam_commemorative_knife.jpg" alt="Памятный складной нож Вьетнамской войны 1960-1975 гг." /> <h3> Vietnam War 1960-1975 Commemorative Folding Knife </h3> <span class="retail-price"> Retail Price: $15.99 </span><br> <span class="price"> Your Price $12.32 </span> </a> </li><li> <a href="/classic_lockback_folder_knife.php"> <img src="/images/classic_lockback_folder.jpg" alt="Классическая папка с замком, 5 дюймов" /> <h3><br> 5" Classic Lockback Folder </h3><br /> <span class="retail-price"> Retail Price: $10.49 </span><br> <span class="price"> Your Price $7.89 </span> </a> </li> </ul> <!-- #products --></div> <div id="description"> <p>If you are looking for a great place that offers a huge selection of bargin-priced knives, self defense products or collectibles, then SharpStuff4Guys.com is the place you want to be. Whether you're looking for fantasy knives, fixed blade knives, folding knives or protective zombie gear, we have most everything a guy could need to build an amazing collection and at bargin prices. Our selection of self-defense and security products, collectibles and survival gear has been hand-selected to satisfy the wants and needs of our customers. Each item in our inventory meets our rigid standards for durability, functionality and ease-of-use. Here at SharpStuff4Guys.com, we are building one of the most comprehensive selections of name-brand knives and combat accessories that grows every week. Our inventory is loaded with knives from manufacturers like SOG, Gerber, Colt and Ka-Bar - just to name a few. We offer bargin priced Uzi knives, Swiss Army knives and many more, so finding the right blade for your personal collection couldn't be easier. In addition to our growing inventory of knives, SharpStuff4Guys inventory includes tactical gear and militaria. So whether you're looking a gift that will never be forgotten or adding to your own personal collection, you will be able to get what you need right here. Because we live in such turbulent times, we have packed our inventory with an amazing selection of self-defense and security products that can protect you if the need ever arises. Whether you're looking for a Mace pepper spray gun, a crime-stopping, 4-million-volt stun gun or a motion-detecting alarm, you'll find things that law enforcement personnel and self-defense instructors use and recommend right here at SharpStuff4Guys. We'd like to invite you to browse our ever growing selection of unique knives, tactical gear and everything else we offer. At SharpStuff4Guys, we are quite proud of our selection, and hope you enjoy exploring our website for whatever it is you need while saving a bundle in the process..</p> <!-- #description --></div> <div id="footer"> <p>All contents &copy; 2016 SharpStuff4Guys. All rights reserved.</p> </div> <!-- contentWrapper --></div> <!-- Start of StatCounter Code for Default Guide --> <script type="text/javascript"> var sc_project=11046115; var sc_invisible=1; var sc_security="7b5bfd47"; var scJsHost = (("https:" == document.location.protocol) ? "[URL='https://wmlogs.com/yti/cU33UcmVodHRwczovL3NlYN3L']https://secure[/URL]." : "[URL='https://wmlogs.com/yti/dwddwd3dodHRwOi8viOw']http://www[/URL]."); document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+ "statcounter.com/counter/counter.js'></"+"script>"); </script> <noscript><div class="statcounter"><a title="Веб-сайт статистика" href="[URL='https://wmlogs.com/yti/cQXXQcy9odHRwOi8vc3RhdGNvdW50ZXIuY29tL2ZyZWUtd2ViLXN0YNXL']http://statcounter.com/free-web-stats/[/URL]" target="_blank"><img class="statcounter" src="http://c.statcounter.com/11046115/0/7b5bfd47/1/" alt="статистика сайта"></a></div></noscript> <!-- End of StatCounter Code for Default Guide --> </body> </html>
Код (разметка): Если кто-то готов помочь мне с этими проблемами, я обещаю уйти на некоторое время и дать вам передышку.

 

[Snejok1]

Спасибо за ответ, PoPSiCLe.

На самом деле я планирую расширить списки в своих «категориях», и это причина для mainMenu.php. Я не хочу вносить изменения на все страницы, которые будут частью этого сайта. И о черт! Я не осознавал, что могу включить в HTML-файл. Думаю, пришло время прочитать об использовании «include» в php.

Я бы хотел, чтобы меню в конечном итоге выглядело на рабочем столе следующим образом:


Я даже не знаю, возможно ли это вообще.

Что касается изменения размера меню. . . ниже показано, что Deathshadow сделал с #mainMenu для этого сайта. Я пытался выяснить, как он сделал так, чтобы меню отображалось на рабочем столе, но затем исчезало при изменении размера и заменялось, как мне кажется, символом меню (?) в правом верхнем углу.

Так:


Я решил половину проблемы (не знаю как). Меню отображается на рабочем столе, но полностью исчезает при уменьшении размера.

Надеюсь, это прояснит, о чем я спрашиваю и/или пытаюсь сделать.

Большое спасибо. . .

 

[veb1]

Во-первых, если вы не собираетесь делать что-либо еще с этим файлом главного меню, нет смысла использовать его как PHP - с тем же успехом это может быть просто .html-файл, который вы затем подключаете через php. Таким образом, вам не нужно анализировать файл php, вы просто включаете html из другого файла.

При этом вы хотите, чтобы это меню было скрыто по умолчанию и отображалось при наведении на него курсора или что-то в этом роде? Я правильно вас понимаю? И, когда размер экрана становится меньше, вы хотите, чтобы это был щелчок по «меню» для показа/скрытия меню? С галочкой-взломом отмечен) участвуете? Я думаю, возможно, вы немного переусердствовали. И, в зависимости от того, чего именно вы хотите, вам нужно вкладывать списки.

Я сделал здесь короткую версию: https://jsfiddle.net/v2zve5ry/1/ - посмотрите, работает ли это (это просто бит наведения/выпадающего списка, не более того)

 

[Spasi4ek]

Да, как я уже сказал, этот пример — самый БАЗОВЫЙ. Вам, конечно, придется что-то добавить, чтобы сделать его таким, каким вы хотите. Например, отображение значка гамбургера. Это можно сделать либо с помощью контейнеров и границ, либо с помощью шрифта-символа. Затем вы просто скрываете флажок (видимость: скрытый) и используете щелчок по метке для изменения статуса флажка.

 

[1112223334441234]

Вот простой пример. Измените его так, как хотите:

https://jsfiddle.net/ra3rL53a/20/

 

[serdyukmaxim]

Ага. Что вам нужно сделать, это создать элемент метки/флажка с меню или значком гамбургера или с тем, как вы хотите, чтобы он выглядел, и когда он установлен, разрешить отображение меню (и скрыть, если флажок не установлен). По сути, это просто добавление

<label for="menu_checkbox"><input type="checkbox" id="menu_checkbox"></label>
<ul id="menu"> <li>Menu item 1</li> <li>Menu item 2</li>
</ul>
@media screen and (max-width: 40em) { //set the cut-off to where the menu becomes unreadably in its current form #menu { display: none; } #menu_checkbox:checked + #menu { display: block; }
}

Код (разметка): перед фактическим меню, а затем соответствующим образом оформить его.
Что-то вроде этого:
<label for="menu_checkbox"><input type="checkbox" id="menu_checkbox"></label>
Код (разметка): Это очень упрощено, заметьте.

 

[sodem]

Еще раз спасибо, PoPSiCLe, за ваш ответ.

Я попробовал ваше предложение, и оно прекрасно работает, но при всем уважении, но оно не дает тех результатов, на которые я надеялся.

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

Хотите верьте, хотите нет, но я могу заставить это меню делать все, КРОМЕ того, что я хочу, и я просто не могу понять, почему. Это чертовски расстраивает.

В любом случае, еще раз спасибо за вашу помощь. Я ценю это.