Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

How do you put the pictures on the CSS menu in advance?

O
Oba22 last edited by

We have a CSS menu with a change of background image for each item. Some of them have rounds, some have pictures of the shooter (there will be a menu).
Brauser, when a menu falls, often displays a part of these items first without a background image, carving it with some delay. And you put a mouse on the point (and change the background of the paragraph) - and then again, it shows an empty background.
How do we make sure that when the pages are downloaded, all the paintings that lie in a particular catalogue are pre-empted?
Reply Quote 0
1 Reply Last reply
briley last edited by
As an option, when a menu is formed, all pictures are added to the mass, and then take them anywhere with style.
```
.preloadedImage { position: absolute; visibility: hidden; top: 0px; left: 0px; width: 1px; height: 1px; }
```
Then they will be uploaded together with the document.
Reply Quote 0
1 Reply Last reply

2
Posts

0
Views

Suggested Topics

O

Put a picture on Div.
Software Programming • css • • obi

2

0
Votes

2
Posts

0
Views

A

Make a block with a merchandise card. position:relative; Put your discount in it and make it. position:absolute;♪ Next, you can move the discount inside the merchandise. left♪ right♪ top♪ bottom♪ Sometimes you have to pick. z-index so that the element sought is ♪and not Underneathfalse
O

Centralize sub menu absolute with css
Software Programming • html css • • Oba22

2

0
Votes

2
Posts

0
Views

B

This solution is too complex for the CSS. We will have to use JavaScript to calculate the correct positioning of the submenus:$( function() { // Armazenamos o submenu numa variável por conveniência var $submenu = $( ".submenu" ); $submenu.each(function(){ $(this).css( "left", ( $(this).parent().outerWidth() / 2 ) - ( $(this).width() / 2 ) ); }); // Aqui, mudamos a propriedade left para ser igual ao tamanho do pai do submenu / 2 (seu centro) - a largura do submenu, em si, dividido por dois também $submenu.css( "left", ( $submenu.parent().outerWidth() / 2 ) - ( $submenu.width() / 2 ) ); } );* { font-family: sans-serif; } ul, li { margin : 0; padding : 0; } #menu { width : 100%; } #menu li { margin : 0; list-style: none; } #menu > li { display : inline-block; border : 1px solid #000000; cursor : pointer; } #menu > li:hover ul { display : block; } #menu li ul { display : none; position : absolute; background-color : #000000; color : #FFFFFF; } #menu li ul li:hover { background-color : #d2d2d2; } /* Regras novas */ .wrapper-menu { width: 100%; text-align: center; } #menu .has-submenu { position: relative; } #menu .submenu li { white-space: nowrap; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper-menu"> <ul id="menu"> <li class="has-submenu"> Menu 1 <ul class="submenu"> <li>Sub menu 1</li> <li>Sub menu 2</li> <li>Um subMenu que é mais longo</li> </ul> </li>  <li class="has-submenu"> Menu 2 <ul class="submenu"> <li>Sub menu 1</li> <li>Sub menu 2</li> <li>Um subMenu que é mais longo</li> </ul> </li> <li>Menu 3</li> </ul> </div>
A

HTML, CSS, blocs in a position, shown in the picture
Software Programming • html cs twist • • Amritpal

2

0
Votes

2
Posts

0
Views

S

You can make three vertical containers and group your blocks as you need.*{ box-sizing: border-box; } body { background: #c7b39b url(/img/fon.jpg) no-repeat 0 / cover; color: #ba1c85; background-attachment: fixed; background-position: center top; /* border-radius: .2rem; */ } /Секция расписания/ .timeTables{ margin: 0 auto; width: max-content; height: 100%; /1000px; auto;/ border-radius: 5px; background-color: white; opacity: 0.9; padding: 10px; display: flex; gap: 10px; } .block{ margin: 0 auto; margin-bottom:10px; padding: 30px; background-color: #12ffa8; border-radius: 5px; width: 280px; height: auto; } .tableBlock{ border:0; text-align: left; } .h3 { max-width: 100%; min-width: 100%; font-style: italic; font-size: 25px; color: black; text-align: center; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="AdminMenu.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <section class="timeTables"> <div class="block-wrapper"> <div class="block"> <h3 class="h3">Лечебно оздоровительный комплекс</h3> <table class="tableBlock"> <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr> </table> </div> <div class="block"> <h3 class="h3">Прокат</h3> <table class="tableBlock"> <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr> </table> </div> </div> <div class="block-wrapper"> <div class="block"> <h3 class="h3">Столовая</h3> <table class="tableBlock"> <tr><th>Завтрак: </th><th>9:00</th><th>-</th><th>10:00</th></tr> <tr><th>Обед: </th><th>13:00</th><th>-</th><th>14:00</th></tr> <tr><th>Полдник: </th><th>16:30</th><th>-</th><th>16:45</th></tr> <tr><th>Ужин: </th><th>19:00</th><th>-</th><th>19:30</th></tr> </table> </div> <div class="block"> <h3 class="h3">Клуб</h3> <table class="tableBlock"> <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Среда: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Суббота: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Воскресенье: </th><th>9:00</th><th>-</th><th>19:00</th></tr> <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr> </table> </div> </div> <div class="block-wrapper"> <div class="block"> <h3 class="h3">Мед кабинеты</h3> <table class="tableBlock"> <tr><th>Понедельник: </th><th>9:00</th><th>-</th><th>16:00</th></tr> <tr><th>Вторник: </th><th>9:00</th><th>-</th><th>16:00</th></tr> <tr><th>Среда: </th><th>9:00</th><th>-</th><th>16:00</th></tr> <tr><th>Четверг: </th><th>9:00</th><th>-</th><th>16:00</th></tr> <tr><th>Пятница: </th><th>9:00</th><th>-</th><th>16:00</th></tr> <tr><th>Суббота: </th><th></th><th>-</th><th></th></tr> <tr><th>Перерыв: </th><th></th><th>-</th><th></th></tr> <tr><th>Перерыв: </th><th>13:00</th><th>-</th><th>14:00</th></tr> </table> </div> </div> </section> </body> </html>
How do you make a menu like a picture?
Software Programming • html5 css3 • • carriann

2

0
Votes

2
Posts

0
Views

M

.header background-color: #4f4f4f .logo display: flex align-items: center .row display: -webkit-flex display: -moz-flex display: -ms-flex display: -o-flex display: flex justify-content: space-around .menu display: -webkit-flex display: -moz-flex display: -ms-flex display: -o-flex display: flex justify-content: flex-end .menu span display: flex align-items: center; .menu-list list-style-type: none display: -webkit-flex display: -moz-flex display: -ms-flex display: -o-flex display: flex .menu-list2 display: -webkit-flex display: -moz-flex display: -ms-flex display: -o-flex display: flex align-items: center list-style-type: none .menu__kompani color: #fff margin-left: 24px &:first-child margin-left: 0 .menu__item margin-left: 3px color: #fff &:first-child margin-left: 0 .menu__item2 margin-left: 24px &:first-child margin-left: 0 .poisk background-color: red width: 23px height: 23px display: -webkit-flex display: -moz-flex display: -ms-flex display: -o-flex display: flex justify-content: center align-items: center .menu__item2_tel color: #fff .menu-list3 display: -webkit-flex display: -moz-flex display: -ms-flex display: -o-flex display: flex justify-content: space-evenly list-style-type: none padding-top: 10px padding-bottom: 10px .menu__item3 border-left: 1px solid #4e5358 padding-left: 17px color: #fff line-height: 33px .menu__item3_img margin-right: 17px vertical-align: middle HTML:<header class="header"> <div class="wrapper"> <div class="row"> <div class="logo"> <img src="img/logo.png" alt="" class='logo__img'> </div> <div class="row-menus"> <div class="row-menu1"> <div class="menu"> <span class="menu__kompani">О компании</span> <span class="menu__kompani">Контакты</span> <ul class="menu-list"> <li class="menu__item"> <img src="img/icons/in.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/youtube.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/tw.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/inst.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/CCl_logo_цветн.png" alt=""> CCL </li> <li class="menu__item"> <img src="img/icons/angl.png" alt=""> </li> </ul> <ul class="menu-list2"> <li class="menu__item2 poisk"> <img src="img/icons/poisk.png" alt=""> </li> <li class="menu__item2"> <img src="img/icons/Инстаграм_копия.png" alt=""> </li> <li class="menu__item2"><span class="menu__item2_tel">+7 499 110 58 32</span> </li> </ul> </div> </div> <div class="row-menu2"> <ul class="menu-list3"> <li class="menu__item3"> <img src="img/RF.png" alt="" class='menu__item3_img'> EAS системы </li> <li class="menu__item3"> <img src="img/Датчики.png" alt="" class='menu__item3_img'> Датчики </li> <li class="menu__item3"> <img src="img/Этикетки.png" alt="" class='menu__item3_img'> Этикетки </li> <li class="menu__item3"> <img src="img/аксессуары.png" alt="" class='menu__item3_img'> аксессуары </li> <li class="menu__item3"> <img src="img/Исходная_маркировка_st.png" alt="" class='menu__item3_img'> Исходная Маркировка ST </li> <li class="menu__item3"> <img src="img/RFID.png" alt="" class='menu__item3_img'> RFID </li> <li class="menu__item3"> <img src="img/Слой_3_копия.png" alt="" class='menu__item3_img'> ALS Этикетки </li> </ul> </div> </div> </div> </div> </header> https://codepen.io/datatest/pen/qvGjNJ
Covered side menu (bootstrap, css)
Software Programming • html5 bootstrap css3 sass navigationbar • • carriann

2

0
Votes

2
Posts

0
Views

K

How about that? .menu { font-family: "Helvetica", sans-serif; font-size: 14px; padding: 0; margin: 0; list-style: none; width: 30%; margin-top: 20px; } .menu li { background-color: #d4d6d8; border-bottom: 2px solid #ffffff; } .menu li:last-child { border-bottom: 0; } .menu a { position: relative; display: block; text-align: center; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 20px; color: #ffffff; padding-left: 35px; } .menu a::before { content:"♘"; top: 50%; left: 15px; transform: translateY(-50%); position: absolute; color: #6fa0f2; font-size: 20px; } .ctrl { display: none; } .logo, label { display: inline-block; } label { background: #6fa0f2; font-size: 18px; color: white; width: 35px; height: 35px; border-radius: 50%; text-align: center; margin-left: 25px; } .ctrl:checked ~ .menu span{ display: none; } .menu a:hover .text-ref{ display: block; }<nav> <div class="logo">Logo</div> <label for="ctrl">&dArr;</label> <input type="checkbox" class="ctrl" id="ctrl"> <ul class="menu"> <li><a href="#"><span class="text-ref">Пункт 1</span></a></li> <li><a href="#"><span class="text-ref">Пункт 2</span></a></li> <li><a href="#"><span class="text-ref">Пункт 3</span></a></li> <li><a href="#"><span class="text-ref">Пункт 4</span></a></li> <li><a href="#"><span class="text-ref">Пункт 5</span></a></li> </ul> </nav>
CSS Menu by clicking on the inside items
Software Programming • css menu • • Marcee

2

0
Votes

2
Posts

0
Views

Y

Diego vc cannot keep the menu open because it is using the pseudo class :focus to open the Menu, then when vc exchanges the :focus (clicking on the link) the menu .open-button:focus loses focus and closes the Menu. I made an example that could serve you. I didn't do all the CSS from the menu that opens pq I don't think it's the goal here.To solve your problem I made the Menu using a checkbox, how much it is checked opens the menu, and when it does not close the menu with display:block/none and vc stylization makes using pseudo class :checkedSee below a simple model using a pseudo element ::after to make an icon when opening and closing (all very simple, but vc can use images in content:'' if you want).item { font-family: 'Open Sans', sans-serif; position: relative; display: inline-block; font-size: 12.5px; color: #969696; margin-left: 30px; cursor: pointer; } .item { font-family: 'Open Sans', sans-serif; position: relative; display: inline-block; font-size: 12.5px; color: #969696; margin-left: 30px; cursor: pointer; } nav input[type="checkbox"] { display: none; } ul { display: none; } input:checked ~ ul { display: block; } input:checked + label { color: red; } input + label::after { content: " +"; font-size: 24px; font-weight: bold; } input:checked + label::after { content: " -"; color: red; }<nav> <input type="checkbox" id="menu"> <label class="item" for="menu">Menu</label> <ul> <li> <a href="{{ route('cliente-conta') }}">Meus dados</a> </li> <li> <a href="{{ route('pedidos') }}">Meus pedidos</a> </li> <li> <a href="{{ route('cliente-logout') }}">Sair</a> </li> </ul> </nav>OBS: I needed to move a little bit in the structure of the tags in the HTML, but nothing too much, actually easier to understand.
J

HTML+CSS: How do you revoke the fused element?
Software Programming • html cs • • jules

2

0
Votes

2
Posts

0
Views

A

First option to add reference display: inline-block;img{ float: left; width: 32px; } a { display: inline-block; }<div> <a href="#"> <img src="https://www.gravatar.com/avatar/b9ba7c62da59f947cc51e7474a86e4db?s=32&d=identicon&r=PG" alt="image"> </a> </div>Second option to add .clearfiximg{ float: left; width: 32px; } .clearfix:after { content: ""; display: table; clear: both; }<div> <a href="#" class="clearfix"> <img src="https://www.gravatar.com/avatar/b9ba7c62da59f947cc51e7474a86e4db?s=32&d=identicon&r=PG" alt="image"> </a> </div>Third option to add reference display: inline-flex;img{ float: left; width: 32px; } a { display: inline-flex; }<div> <a href="#"> <img src="https://www.gravatar.com/avatar/b9ba7c62da59f947cc51e7474a86e4db?s=32&d=identicon&r=PG" alt="image"> </a> </div>
J

TwentyTwenty-child master window
Software Programming • php html cs wordpress • • juvenalb

2

0
Votes

2
Posts

0
Views

For each page differently. Read the hierarchy of the templates: https://wp-kama.ru/id_7654/ierarhiya-fajlov-temy-shablona.html
C

How do you move the owl-carousel shooter?
Software Programming • html cs owl carousel • • charlenef

2

0
Votes

2
Posts

0
Views

D

It's the only way you're going to contact her by your code. carousel-3d-containerso I got a higher level:#example .carousel-3d-controls .next span { color: #f00; left: 10px; } It's possible that this class will be overwhelmed by major styles, so we'll have to sign it. !important♪If you're using a vue-owl-carousel package, please note that it's in the component. https://github.com/s950329/vue-owl-carousel/blob/master/src/Carousel.vue (sighs)prev and nextThere's a way to announce your arrow code and your unique class, and then you can move the element anywhere.
E

How do we make two div blocks one straight?
Software Programming • html cs • • emerson

2

0
Votes

2
Posts

0
Views

S

Incomprehensible language, especially the part with the window. Divas went down because: They are not all placed in a parent container,float should be installed for the left bloc itself.
E

Width of page js
Software Programming • javascript html cs width • • emerson

2

0
Votes

2
Posts

0
Views

T

In the case of Synchronization, CSS and JS on the use of relevant rules, I suggest through CSS-variable Reflect the variable, and in JS consider and respond accordingly.window.addEventListener('resize', checkWidth); checkWidth(); function checkWidth() { console.clear(); console.log(getComputedStyle(document.documentElement).getPropertyValue('--is-thewidth')); }:root { --is-thewidth: moreThan990; } @media (max-width: 990px) { :root { --is-thewidth: lessThan990; } body { background-color: red; } }
S

How do you put a picture of a blue shade in the ks?
Software Programming • css • • simrah

2

0
Votes

2
Posts

0
Views

That's the option:div {position: relative; width: 500px; height: 300px;} div img {filter: drop-shadow(2px 3px 5px blue);} div:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,255,0.5); transition: background 0.8s; } div:hover:after {background: rgba(0,0,255,0)} div:hover img {filter: drop-shadow(2px 3px 5px black);}<div><img src="https://dnevnyk-uspeha.com/wp-content/uploads/2014/05/interesnye-fakty-o-koshkah-o-kotoryh-vy-ne-znali.jpg"></div>Or another option:div { position: relative; width: 500px; height: 300px; background: rgba(0, 0, 255, 0.5); transition: background 0.8s; } div img { mix-blend-mode: multiply; filter: grayscale(100%) contrast(1); filter: drop-shadow(2px 3px 5px blue); } div:hover {background: rgba(0, 0, 255, 0)} div:hover img {filter: drop-shadow(2px 3px 5px black);}<div><img src="https://dnevnyk-uspeha.com/wp-content/uploads/2014/05/interesnye-fakty-o-koshkah-o-kotoryh-vy-ne-znali.jpg"></div>
R

Bootstrap menu, top reference picture
Software Programming • bootstrap • • Raziyah00

2

0
Votes

2
Posts

0
Views

K

*{ box-sizing: border-box; } .nav { padding: 0; } .nav > li { list-style: none; float: left; } .nav > li a { display: inline-block; position: relative; padding-top: 50px; } .nav > li a:before { content: ''; position: absolute; top: 5px; left: 50%; margin-left: -23px; width: 46px; height: 44px; background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0; text-align: center; } .nav > li:nth-of-type(2) a:before{ width: 43px; background: url(https://www.w3schools.com/css/img_navsprites.gif) -47px 0; } .nav > li:nth-of-type(3) a:before{ width: 43px; background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0; }<ul class="nav navbar-nav"> <li><a href="#">Палитра</a></li> <li><a href="#">Палитра</a></li> <li><a href="#">Палитра</a></li> </ul>
C

No JS inside ReactJS
Software Programming • javascript cs reactjs ecmascript 6 components • • chanisef

2

0
Votes

2
Posts

0
Views

B

If it's primitive, it's like,import React, {Component} from 'react'; export default class Menu extends Component { constructor(){ super(); this.state = { classVarButt: 'butt', classVarNav: 'menu' } } render () { return ( <div> <button className={this.state.classVarButt} onClick= {() => this.setState({classVarButt: 'menu_active', classVarNav: 'butt_active'})}>Menu</button> <nav className={this.state.classVarNav}> <a href="#">first part</a> <a href="#">second part</a> </nav> </div> ); } } Please don't throw stones, ask for anything but work.
R

Compatibility of site c IE 6 and above
Software Programming • html web programming internet explorer • • Rossere

2

0
Votes

2
Posts

0
Views

I'm so IE.    I mean, depending on the browser, the extra cs will be connected. That's where we need to redesign all the glue styles, make the chaki, roughly.

How do you put the pictures on the CSS menu in advance?

Suggested Topics

Put a picture on Div. Software Programming • css • • obi

Centralize sub menu absolute with css Software Programming • html css • • Oba22

HTML, CSS, blocs in a position, shown in the picture Software Programming • html cs twist • • Amritpal

How do you make a menu like a picture? Software Programming • html5 css3 • • carriann

Covered side menu (bootstrap, css) Software Programming • html5 bootstrap css3 sass navigationbar • • carriann

CSS Menu by clicking on the inside items Software Programming • css menu • • Marcee

HTML+CSS: How do you revoke the fused element? Software Programming • html cs • • jules

TwentyTwenty-child master window Software Programming • php html cs wordpress • • juvenalb

How do you move the owl-carousel shooter? Software Programming • html cs owl carousel • • charlenef

How do we make two div blocks one straight? Software Programming • html cs • • emerson

Width of page js Software Programming • javascript html cs width • • emerson

How do you put a picture of a blue shade in the ks? Software Programming • css • • simrah

Bootstrap menu, top reference picture Software Programming • bootstrap • • Raziyah00

No JS inside ReactJS Software Programming • javascript cs reactjs ecmascript 6 components • • chanisef

Compatibility of site c IE 6 and above Software Programming • html web programming internet explorer • • Rossere

Put a picture on Div.
Software Programming • css • • obi

Centralize sub menu absolute with css
Software Programming • html css • • Oba22

HTML, CSS, blocs in a position, shown in the picture
Software Programming • html cs twist • • Amritpal

How do you make a menu like a picture?
Software Programming • html5 css3 • • carriann

Covered side menu (bootstrap, css)
Software Programming • html5 bootstrap css3 sass navigationbar • • carriann

CSS Menu by clicking on the inside items
Software Programming • css menu • • Marcee

HTML+CSS: How do you revoke the fused element?
Software Programming • html cs • • jules

TwentyTwenty-child master window
Software Programming • php html cs wordpress • • juvenalb

How do you move the owl-carousel shooter?
Software Programming • html cs owl carousel • • charlenef

How do we make two div blocks one straight?
Software Programming • html cs • • emerson

Width of page js
Software Programming • javascript html cs width • • emerson

How do you put a picture of a blue shade in the ks?
Software Programming • css • • simrah

Bootstrap menu, top reference picture
Software Programming • bootstrap • • Raziyah00

No JS inside ReactJS
Software Programming • javascript cs reactjs ecmascript 6 components • • chanisef

Compatibility of site c IE 6 and above
Software Programming • html web programming internet explorer • • Rossere