Я работаю с электроном, чтобы создать приложение, но моя строка меню, кажется, не работает. Я применил немного CSS для получения желаемого результата. Я проверил эту вещь на другом HTML вне Electron, и она, кажется, работала.
Если кто-нибудь может заглянуть в мой код и сказать, что не так ... Смысл в том, что у меня настроена панель навигации. Когда пользователь наводит курсор на самые внутренние теги привязки, шрифт должен быть жирным. Однако, похоже, это не сработает.
И еще, другое дело, что якоря связаны с некоторыми модальностями, но они, похоже, не работают. Хотя вся навигационная панель отлично работает вне электрона.
Я знаю, что было бы немного беспокойно смотреть на такой большой объем кода ... Но если бы кто-то мог мне помочь. Я собираюсь вставить сюда HTML, и я буду ссылаться на CSS
Таким образом, два файла, вызывающих озабоченность, mainWindow.html и dock.css
mainWindow.html:
<nav class="navy-main">
<div class="logo">T-Mordern</div>
<ul>
<li>
<a href="#" class="navy-item">File</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a href="#">New File</a>
</li>
<li>
<a href="#">New Project</a>
</li>
<li>
<a href="#">Open File</a>
</li>
<li>
<a href="#">Save</a>
</li>
<li>
<a href="#">Save As</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="navy-item">Edit</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a href="#">Cut</a>
</li>
<li>
<a href="#">Copy</a>
</li>
<li>
<a href="#">Pate</a>
</li>
<li>
<a href="#">Undo</a>
</li>
<li>
<a href="#">Redo</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="navy-item">Settings</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a data-toggle="modal" href="#ThemeSet">Theme Settings</a>
</li>
<li>
<a data-toggle="modal" href="#FontSet">Font Settings</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<span class="close-my">×</span>
<span class="close-my">═</span>
<span class="close-my">−</span>
</nav>
<!--Modals-->
<div class="modal" id="ThemeSet">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change Theme</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group modal-body">
<p>
<label for="theme" id="text-theme">Please Select Your Theme form here:</label>
<select class="form-control" id="theme">
<option value="pastel-on-dark" selected>Pastel On Dark</option>
<option value="default">Standard</option>
<option value="darcula">Darcula</option>
<option value="cobalt">Cobalt</option>
<option value="solarized">Solarized</option>
<option value="shadowfox">ShadowFox</option>
<option value="seti">Seti</option>
<option value="rubyblue">RubyBlue</option>
<option value="railcasts">RailsCasts</option>
<option value="paraiso-light">Paraiso-Light</option>
<option value="paraiso-dark">Paraiso-Dark</option>
<option value="panda-syntax">Panda Syntax</option>
<option value="oceanic-next">Oceanic Next</option>
<option value="night">Night</option>
<option value="neo">Neo</option>
<option value="neat">Neat</option>
<option value="monokai">Monokai</option>
<option value="midnight">Midnight</option>
<option value="mdn-like">MDN Like</option>
<option value="mbo">MBO</option>
<option value="material">Material</option>
<option value="lucario">Lucario</option>
<option value="liquibyte">Liquibyte</option>
<option value="lesser-dark">Lesser Dark</option>
<option value="isotope">Isotope</option>
<option value="idea">IDEA</option>
<option value="icecoder">IceCoder</option>
<option value="hopscotch">Hopscotch</option>
<option value="gruvbox-dark">Gruvbox Dark</option>
<option value="erlang-dark">Erlang Dark</option>
<option value="elegant">Elegant</option>
<option value="eclipse">Eclipse</option>
<option value="duotone-light">Duotone Light</option>
<option value="duotone-dark">Duotone Dark</option>
<option value="colorforth">ColorForth</option>
<option value="blackboard">BlackBoard</option>
<option value="bespin">Bespin</option>
<option value="base16-light">Base16 Light</option>
<option value="base16-dark">Base16 Dark</option>
<option value="ambiance">Ambiance</option>
<option value="ambiance-mobile">Ambiance Mobile</option>
<option value="abcdef">ABCDEF</option>
<option value="3024-night">3024 Night</option>
<option value="3024-day">3024 Day</option>
<option value="zenburn">Zenburn</option>
<option value="yeti">Yeti</option>
<option value="xq-light">XQ Light</option>
<option value="xq-dark">XQ Dark</option>
<option value="vibrant-ink">Vibrant Ink</option>
<option value="twilight">Twilight</option>
<option value="ttcn">TTCN</option>
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
<option value="the-matrix">The Matrix</option>
<option value="ssms">SSMS</option>
</select>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="FontSet">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change Font Settings: </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group modal-body">
<p>
<p class="lead" id="intext">Change Font-Size: <select class="form-control" id="fontval">
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option selected value="28">28</option>
<option value="32">32</option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="108">108</option>
</select>
</p>
<hr class="my-4">
<p class="lead" id="intext2">Change Font Face: <select class="form-control" id="fontval2">
<option value="Arial">Arial</option>
<option value="Calibri">Calibri</option>
<option value="Consolas" selected>Consolas</option>
<option value="Courier">Courier</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Segoe UI">Segoe UI</option>
<option value="Times New Roman">Times New Roman</option>
</select>
</p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="fsave">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Я также связал jquery и другие необходимые вещи.
Вот ссылка на файл CSS: https://pastebin.com/d5aLqApy
И да, я знаю, что CSS содержит много !important в нем ...
z-index есть, потому что у меня текстовая область ниже навигационной панели .....
А вот как вещь должна функционировать: https://jsfiddle.net/Sid2018/uthqv36o/1/