如何使用ASP.NET菜单控件在水平线上显示菜单项？

huangapple
go评论102阅读模式
英文:

How to display menu items in a horizontal line using ASP.NET Menu control?

问题

以下是您的代码的翻译部分：

我正在开发一个ASP.NET Web应用程序，并且正在使用菜单控件创建导航栏。然而，我在显示菜单项时遇到了一个问题，它们以垂直列表的形式显示。

我想要实现以下菜单布局：

Narudžbe | Artikli | Prijevoznici | Kupci | Izvještaji

这是我的代码：

  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LandingPage.aspx.vb" Inherits="Mišković_OMIS_projekt.LandingPage" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title></title>
  8.     <style>
  9.         .navbar {
  10.             background-color: #333;
  11.             overflow: hidden;
  12.             display: flex;
  13.             justify-content: center; /* Align items horizontally */
  14.         }
  16.         .navbar a {
  17.             float: none; /* Remove float property */
  18.             color: #f2f2f2;
  19.             text-align: center;
  20.             padding: 14px 16px;
  21.             text-decoration: none;
  22.             font-size: 20px;
  23.         }
  25.         .navbar a:hover {
  26.             background-color: #ddd;
  27.             color: black;
  28.         }
  30.         .logo {
  31.             text-align: center;
  32.             padding: 20px 0;
  33.         }
  35.         .logo img {
  36.             width: 800px; /* Adjust the width as per your logo's dimensions */
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <form id="form1" runat="server">
  42.         <div class="navbar">
  43.             <asp:Menu ID="MyMenu" runat="server">
  44.                 <Items>
  45.                     <asp:MenuItem Text="Narudžbe" Value="~/Stranice/Narudzbe.aspx"></asp:MenuItem>
  46.                     <asp:MenuItem Text="Artikli" Value="~/Stranice/Artikli.aspx"></asp:MenuItem>
  47.                     <asp:MenuItem Text="Prijevoznici" Value="~/Stranice/Prijevoznici.aspx"></asp:MenuItem>
  48.                     <asp:MenuItem Text="Kupci" Value="~/Stranice/Kupci.aspx"></asp:MenuItem>
  49.                     <asp:MenuItem Text="Izvještaji" Value="~/Stranice/Izvjestaji.aspx"></asp:MenuItem>
  50.                 </Items>
  51.             </asp:Menu>
  52.         </div>
  53.         <div class="logo">
  54.             <img src="Images/logo.png" alt="OMIS Logo" />
  55.         </div>
  56.     </form>
  57. </body>
  58. </html>

我尝试修改了CSS属性，例如display: flex和float: none，但菜单项仍然以垂直列表的方式显示。如何修改我的CSS或ASP.NET代码以实现所需的菜单项水平布局？

此外，这是VB.NET中的代码：

  1. Public Class LandingPage
  2.     Inherits System.Web.UI.Page
  4.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  5.         MyMenu.Items(0).NavigateUrl = "~/Stranice/Narudzbe.aspx"
  6.         MyMenu.Items(1).NavigateUrl = "~/Stranice/Artikli.aspx"
  7.         MyMenu.Items(2).NavigateUrl = "~/Stranice/Prijevoznici.aspx"
  8.         MyMenu.Items(3).NavigateUrl = "~/Stranice/Kupci.aspx"
  9.         MyMenu.Items(4).NavigateUrl = "~/Stranice/Izvjestaji.aspx"
  10.     End Sub
  12.     Protected Sub MyMenu_MenuItemClick(sender As Object, e As MenuEventArgs) Handles MyMenu.MenuItemClick
  13.         ' Get the selected item's URL
  14.         Dim selectedItemUrl As String = MyMenu.SelectedItem.Value
  16.         ' Redirect to the selected page
  17.         Response.Redirect(selectedItemUrl)
  18.     End Sub
  19. End Class

希望这有所帮助。

英文:

I am working on an ASP.NET web application, and I'm using the Menu control to create a navigation bar. However, I'm facing an issue with displaying the menu items in a horizontal line. Currently, the menu items are displayed vertically like a list.

I want to achieve the following layout for my menu:

Narudžbe | Artikli | Prijevoznici | Kupci | Izvještaji

Here is my code:

  1. &lt;%@ Page Language=&quot;vb&quot; AutoEventWireup=&quot;false&quot; CodeBehind=&quot;LandingPage.aspx.vb&quot; Inherits=&quot;Mišković_OMIS_projekt.LandingPage&quot; %&gt;
  2. &lt;!DOCTYPE html&gt;
  3. &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  4. &lt;head runat=&quot;server&quot;&gt;
  5. &lt;title&gt;&lt;/title&gt;
  6. &lt;style&gt;
  7. .navbar {
  8. background-color: #333;
  9. overflow: hidden;
  10. display: flex;
  11. justify-content: center; /* Align items horizontally */
  12. }
  13. .navbar a {
  14. float: none; /* Remove float property */
  15. color: #f2f2f2;
  16. text-align: center;
  17. padding: 14px 16px;
  18. text-decoration: none;
  19. font-size: 20px;
  20. }
  21. .navbar a:hover {
  22. background-color: #ddd;
  23. color: black;
  24. }
  25. .logo {
  26. text-align: center;
  27. padding: 20px 0;
  28. }
  29. .logo img {
  30. width: 800px; /* Adjust the width as per your logo&#39;s dimensions */
  31. }
  32. &lt;/style&gt;
  33. &lt;/head&gt;
  34. &lt;body&gt;
  35. &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
  36. &lt;div class=&quot;navbar&quot;&gt;
  37. &lt;asp:Menu ID=&quot;MyMenu&quot; runat=&quot;server&quot;&gt;
  38. &lt;Items&gt;
  39. &lt;asp:MenuItem Text=&quot;Narudžbe&quot; Value=&quot;~/Stranice/Narudzbe.aspx&quot;&gt;&lt;/asp:MenuItem&gt;
  40. &lt;asp:MenuItem Text=&quot;Artikli&quot; Value=&quot;~/Stranice/Artikli.aspx&quot;&gt;&lt;/asp:MenuItem&gt;
  41. &lt;asp:MenuItem Text=&quot;Prijevoznici&quot; Value=&quot;~/Stranice/Prijevoznici.aspx&quot;&gt;&lt;/asp:MenuItem&gt;
  42. &lt;asp:MenuItem Text=&quot;Kupci&quot; Value=&quot;~/Stranice/Kupci.aspx&quot;&gt;&lt;/asp:MenuItem&gt;
  43. &lt;asp:MenuItem Text=&quot;Izvještaji&quot; Value=&quot;~/Stranice/Izvjestaji.aspx&quot;&gt;&lt;/asp:MenuItem&gt;
  44. &lt;/Items&gt;
  45. &lt;/asp:Menu&gt;
  46. &lt;/div&gt;
  47. &lt;div class=&quot;logo&quot;&gt;
  48. &lt;img src=&quot;Images/logo.png&quot; alt=&quot;OMIS Logo&quot; /&gt;
  49. &lt;/div&gt;
  50. &lt;/form&gt;
  51. &lt;/body&gt;
  52. &lt;/html&gt;

I have tried modifying the CSS properties such as display: flex and float: none, but the menu items are still displayed in a vertical list. How can I modify my CSS or ASP.NET code to achieve the desired horizontal layout for the menu items?

Here is also the code-behind in VB.NET:

  1. Public Class LandingPage
  2. Inherits System.Web.UI.Page
  3. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  4. MyMenu.Items(0).NavigateUrl = &quot;~/Stranice/Narudzbe.aspx&quot;
  5. MyMenu.Items(1).NavigateUrl = &quot;~/Stranice/Artikli.aspx&quot;
  6. MyMenu.Items(2).NavigateUrl = &quot;~/Stranice/Prijevoznici.aspx&quot;
  7. MyMenu.Items(3).NavigateUrl = &quot;~/Stranice/Kupci.aspx&quot;
  8. MyMenu.Items(4).NavigateUrl = &quot;~/Stranice/Izvjestaji.aspx&quot;
  9. End Sub
  10. Protected Sub MyMenu_MenuItemClick(sender As Object, e As MenuEventArgs) Handles MyMenu.MenuItemClick
  11. &#39; Get the selected item&#39;s URL
  12. Dim selectedItemUrl As String = MyMenu.SelectedItem.Value
  13. &#39; Redirect to the selected page
  14. Response.Redirect(selectedItemUrl)
  15. End Sub
  16. End Class

答案1

得分: 0

Here is the translation of the provided code:

尝试这个菜单设置：

如何使用ASP.NET菜单控件在水平线上显示菜单项？

如果您在属性表中设置了上述内容，那么您的菜单将变成这样：

  1.         &lt;asp:Menu ID=&quot;MyMenu&quot; runat=&quot;server&quot; 
  2. Orientation=&quot;Horizontal&quot; RenderingMode=&quot;Table&quot;&gt;
  3. &lt;Items&gt;

结果如下：

如何使用ASP.NET菜单控件在水平线上显示菜单项？

英文:

Try this for the menu settings:

如何使用ASP.NET菜单控件在水平线上显示菜单项？

if you set above in property sheet, then your menu becomes this:

  1.         &lt;asp:Menu ID=&quot;MyMenu&quot; runat=&quot;server&quot; 
  2. Orientation=&quot;Horizontal&quot; RenderingMode=&quot;Table&quot;&gt;
  3. &lt;Items&gt;

And the result is this:

如何使用ASP.NET菜单控件在水平线上显示菜单项？

huangapple
  • 本文由 发表于 2023年5月14日 17:04:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76246661.html
  • asp.net
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定